Commit @f878e6d375cfaa002083ab49e484f033f83a8f1f

류윤주 2023-11-17

231117 류윤주 홍보뉴스 css 수정

@f878e6d375cfaa002083ab49e484f033f83a8f1f

d8e3a3e

f878e6d

client/resources/css/Main.css

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

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


 .main-benner {
   width: 100%;
 }
+
 .main-benner-img img {
   width: 100%;
 }
+
 .main-notice {
   grid-column: 1/3;
   padding: 0 0 3rem;

 .main-notice h2 i {
   margin-right: 1rem;
 }
+
 .modal-content iframe {
   height: 300px;
 }
+
 .modal-content-box {
-  text-align: center;
-  padding: 3rem;
+  text-align: left;
+  padding: 3rem 0;
   height: 250px;
   overflow-y: auto;
 }
-.modal-content-box > p {
+
+.modal-content-box>p {
   margin-bottom: 1.5rem;
 }
+
 .modal-news-title {
   font-size: 2rem;
   font-weight: 600;
+  color: #3f87f7;
 }
+
+.file-zone-title {
+  color: #3f87f7;
+  flex: 0 0 10%;
+}
+
+.modal-content-box>div>ul {
+  flex: 0 0 85%;
+}
+
 /* 퍼즐 */
 .main-content-wrap {
   width: 100%;
   height: 100%;
   padding: 60px;
 }
+
 .swiper-slide .modal-img img {
   width: 100%;
 }

   grid-template-columns: 1fr 1fr 1fr;
 }
 
-.main-puzzle-container > div:nth-child(4) {
+.main-puzzle-container>div:nth-child(4) {
   position: relative;
 }
 
-.main-puzzle-container > div:nth-child(4)::after {
+.main-puzzle-container>div:nth-child(4)::after {
   position: absolute;
   content: "";
   width: 90px;

   margin: 0 auto;
 }
 
-.main-wrap-news-hidden .swiper{
+.main-wrap-news-hidden .swiper {
   padding: 0 50px;
 }
 
-.main-wrap-news-hidden .swiper-button-prev, 
-.main-wrap-news-hidden .swiper-button-next{
+.main-wrap-news-hidden .swiper-button-prev,
+.main-wrap-news-hidden .swiper-button-next {
   top: 60%;
   width: 15px;
   height: 15px;
 }
 
-.main-wrap-news-hidden .swiper-button-prev:after, 
-.main-wrap-news-hidden .swiper-button-next:after{
+.main-wrap-news-hidden .swiper-button-prev:after,
+.main-wrap-news-hidden .swiper-button-next:after {
   font-size: 25px;
 }
 

   font-family: SBaggroM;
   color: #09365e;
 }
+
 /* 메인 뉴스 팝업창 */
 .mySwiper .modal {
   width: 100%;
   background-color: #000000;
 }
+
 /* 파트너사 */
 .main-partner {
   width: 100%;

   background-color: #e2e2e2;
 }
 
-.matching-box-grid > h3 {
+.matching-box-grid>h3 {
   font-size: 2.6rem;
   padding: 3rem;
   font-family: SBaggroM;

   width: 100%;
   height: 120px;
 }
+
 .matchingbox-img img {
   width: 100% !important;
 }

   grid-template-columns: 1fr 1fr 1fr;
 }
 
-.modal-img > p{
+.modal-img>p {
   padding: 10px 0;
   font-size: 1.6rem;
   text-align: center;

 
   font-family: SBaggroM;
 }
+
 .data-bos {
   width: 100%;
   display: grid;
   grid-template-columns: 70% 1fr;
 }
+
 .data-text img {
   width: 80px;
 }

   border-color: #3898ec;
   outline: none;
 }
+
 .dtail-navigation-in {
   display: flex;
   justify-content: end;
 }
+
 .dtail-navigation-in button {
   padding: 0.5rem 2rem;
   background-color: #007aff;
   color: white;
   border-radius: 0.5rem;
 }
+
 .data-detail-page {
   padding: 0 0 6rem 0;
 }

 
   background-color: #ffffff;
 }
+
 .data-bos-btn2::before {
   height: 30rem;
   position: absolute;

 
   background-color: #ffffff;
 }
+
 .data-bos-btn3::after {
   height: 30rem;
   position: absolute;

   z-index: 1;
   background-color: var(--button-bg-color);
 }
+
 .data-banner {
   width: 100%;
   display: grid;

   background-position: right bottom;
   background-size: 180px;
 }
+
 .data-bos-btn2 {
   padding: 2rem;
 

   background-position: center bottom;
   background-size: 220px;
 }
+
 .data-bos-btn3 {
   padding: 2rem;
   background: url(../jpg/data-2.png) no-repeat;
   background-position: left bottom;
   background-size: 150px;
 }
+
 .data-banner h2 {
   font-size: 4rem;
   display: flex;

   font-family: SBaggroM;
   font-weight: 500;
 }
+
 .data-bos-btn1 h2 {
   text-align: left;
   color: #014099;
 }
+
 .data-bos-btn1 span {
   color: #0259c1;
 }
+
 .data-bos-btn2 h2 {
   color: #0e5e2e;
   justify-content: center;
 }
+
 .data-bos-btn2 span {
   color: #1a8445;
 }
+
 .data-bos-btn3 h2 {
   justify-content: end;
   color: #c26400;
 }
+
 .data-bos-btn3 span {
   color: #e07e27;
 }
+
 .data-bos-btn1 span,
 .data-bos-btn2 span {
   width: 100%;
 }
+
 .data-banner span {
   font-weight: 400;
   font-size: 1.7rem;
 }
+
 .data-banner button p {
   width: 80%;
   font-size: 1.5rem;

   transform: translateY(-60px);
   font-weight: 500;
 }
+
 .data-bos-btn1 p {
   color: #014099;
 }
+
 .data-bos-btn2 p {
   margin: 0 auto;
   text-align: center;

 .guide-sec {
   padding: 3rem;
 }
+
 .guide-sec img {
   width: 100%;
 }
+
 .guide-logo-bt {
   background-color: #00335a;
   padding-right: 3rem;

   padding: 21px 10px;
   background-color: #f9f9f9;
 }
+
 /* .tech-view .tech-info > * {
   display: inline-block;
   vertical-align: middle;

   font-size: 2.5rem;
   color: #007aff;
 }
+
 .tech-report button {
   padding: 1rem 2rem;
   color: white;

   border-radius: 0.5rem;
   font-weight: 700;
 }
+
 .tech-info {
   padding: 31px 0 31px;
   border-top: 1px solid #132331;
   display: flex;
   align-items: center;
 }
+
 .tech-info-img {
   width: 500px;
 }
+
 .tech-info-img img {
   padding: 22px 28px;
   background: #f2f4f6;

   text-align: center;
   box-sizing: border-box;
 }
+
 .tech-txt-wrap {
   width: 100%;
   margin-left: 110px;
 }
-.tech-txt-wrap li > * {
+
+.tech-txt-wrap li>* {
   display: inline-block;
   font-weight: 400;
   font-size: 2rem;
   padding: 15px 0 15px;
 }
+
 .tech-txt-wrap li {
   border-bottom: 1px solid #e5e5e5;
 }
+
 .tech-txt-wrap li strong {
   min-width: 152px;
   padding-left: 1.8rem;

   position: relative;
   font-weight: 700;
 }
+
 .tech-txt-wrap li strong::after {
   position: absolute;
   right: 0;

   background: #a6a6a6;
   content: "";
 }
+
 .tech-btn {
   width: 100%;
   padding: 21px 10px;
 }
+
 .tech-btn button {
   float: right;
   padding: 1rem 2rem;

   border-radius: 0.5rem;
   font-weight: 700;
 }
+
 .date {
   text-align: left;
   padding: 1rem 0;
   font-size: 1.3rem;
 }
+
 /* 가리기  */
 .tech-box-sec-img {
   box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);

   background-color: white;
   border-radius: 1rem;
 }
+
 .tech-box-fillter {
   position: relative;
   filter: blur(4px);
   background-color: rgba(248, 248, 248, 0.5);
 }
+
 .overlay-text {
   position: relative;
   top: -50%;

 }
 
 .info-sec div,
-.info-sec-1 > div {
+.info-sec-1>div {
   display: grid;
 
   border-bottom: 1px solid #333;

   font-size: 1.5rem;
   color: #007aff;
 }
+
 .pwinfro span {
   padding: 2rem !important;
 }
+
 .info-sec div span {
   padding: 3rem;
   font-size: 1.2rem;
 }
+
 .info-sec button {
   padding: 1rem 0.5rem;
   background-color: #007aff;
   color: white;
   border-radius: 0.5rem;
 }
+
 .info-sec-1 div a {
   padding: 3rem;
 }
+
 .info-keword-far {
   grid-row: 1 / span 3;
 }
-.info-sec-1 > div > p {
+
+.info-sec-1>div>p {
   padding: 3rem 0;
   font-size: 1.2rem;
   color: #007aff;
   /* border-bottom: 1px solid #333; */
 }
+
 .info-sec-1 span {
   padding: 3rem 0;
   font-size: 1.2rem;
 }
+
 .company-logo {
   margin: 2rem 0;
 }
+
 .company-info .blue-btn {
   width: 50%;
   margin: 0 auto;
   text-align: center;
 }
+
 .info-sec-1 section img {
   width: 260px;
   height: 120px;

   padding: 2rem;
   border-radius: 0.5rem;
 }
+
 .info-sec p button {
   padding: 0.5rem 0.5rem;
   background-color: #007aff;
   color: white;
   border-radius: 0.5rem;
 }
+
 .info-pw-maill div {
   display: flex;
   border: 0px;
   padding: 0 4rem;
 }
+
 /* Introduction css */
 .intro {
   width: 100%;

   font-weight: 500;
   color: #2c407f;
 }
+
 .info-keword {
   padding: 0 !important;
   text-align: left !important;

   font-size: 1.5rem;
   color: #007aff;
 }
+
 .intro-text {
   padding: 3rem;
 }

 .intro-img img:nth-child(3) {
   transform: translateY(-6.9rem);
 }
+
 .info-sec-summary p {
   color: #000000;
 }

   padding: 1.5rem 0;
   display: flex;
 }
+
 .matching-box-button div {
   display: inline-block;
   cursor: pointer;

   color: #666;
 }
 
-.matching-box-button div input[type="radio"]:checked + label {
+.matching-box-button div input[type="radio"]:checked+label {
   color: #007aff;
   border-bottom: 0px;
   background: linear-gradient(#71aef0, rgb(255, 255, 255));
   border-bottom: 1px solid #fff;
 }
+
 .matching-wrap-sub {
   width: 100%;
   margin: 0 auto;

   font-size: 4rem;
   padding: 2rem 0;
 }
+
 .inbox {
   display: grid;
 
   grid-template-columns: 1fr;
 }
+
 .matching-section-box h2 {
   font-size: 2rem;
 }
+
 .inbox-sub,
 .outbox-sub {
   padding: 6rem 0;

   padding: 1.5rem 2.5rem;
   box-shadow: 1px 1px 5px #33333344;
 }
+
 .inbox-img h4 {
   font-size: 1.5rem;
   text-align: left;

   border-radius: 1rem;
   margin-bottom: 30px;
 }
+
 .inbox-img-blur img {
   filter: blur(1.5px);
   box-shadow: 1px 1px 3px #33333337;

   color: white;
   font-weight: 700;
 }
+
 .inbox-img-box {
   width: 260px;
   height: 120px;

 .matching-section-box {
   padding: 6rem 3rem;
 }
+
 .downbtn-none {
   display: none;
   padding: 1rem !important;
 }
+
 .matchingbox-img {
   width: 300px;
   height: 175px;

   background-color: #f9f9f9;
   border-radius: 1rem;
 }
+
 /* 모달css */
 .matchingmodal {
   width: 100%;

   background-color: rgb(0, 0, 0);
   background-color: rgba(0, 0, 0, 0.4);
 }
+
 .matching-modal-box {
   background-color: #fefefe;
   margin: 15% auto;

   text-align: center;
   position: relative;
 }
+
 .matching-modal-box h1 {
   font-size: 2rem;
   text-align: left;
 }
+
 .matching-modal-box img {
   margin: 0 auto;
   padding: 3rem;
 }
+
 .matching-modal-box button {
   width: 80%;
   background-color: #007aff;

   position: relative;
 }
 
-.join-imgbox > p {
+.join-imgbox>p {
   width: 100%;
   height: 100%;
   top: 0;

   position: absolute;
 }
 
-.join-imgbox > img {
+.join-imgbox>img {
   width: 100%;
   height: 100%;
   position: absolute;

   margin: 0 auto;
 }
 
-.login-info > div > p {
+.login-info>div>p {
   color: rgb(255, 0, 0);
   padding: 0 1rem;
   font-size: 1.5rem;

   color: #0e5e2e;
   background-color: #e6fff1;
 }
+
 .join-b span {
   font-size: 1.5rem;
   font-family: "Pretendard-Regular";
   color: #3f87f7;
 }
+
 .join-sub-input input[type="file"] {
   width: 100%;
   padding: 1rem;
   border: 1px solid #eee;
   border-radius: 5px;
 }
+
 .btn-upload-join {
   width: 100%;
   background-color: #3f87f7;

   text-align: center;
   color: white;
 }
+
 .login-info-grid-1 {
   padding: 2rem 0;
 }
+
 #email_sel {
   padding: 9px 62px;
 }

 .join-blue-btn {
   width: 100% !important;
 }
+
 .login-info,
 .login-info2 {
   width: 100%;

   font-size: 1.4rem;
   padding: 0.5rem;
 }
+
 .j-s-3 {
   padding: 1rem;
   display: grid;

   grid-template-columns: 180px 1fr;
   gap: 5rem;
 }
+
 .info-th {
   padding: 3rem 0 !important;
   text-align: left !important;
 }
+
 .login-info-grid-3 {
   width: 100%;
   height: 100%;
   padding: 1rem 0;
 }
+
 .info-sec-summary {
   padding: 2rem 0;
   grid-template-columns: 1fr !important;
 }
+
 .info-sec-summary div {
   grid-template-columns: 1fr;
 }
+
 .info-sec-summary textarea {
   height: 200px;
 }
+
 .info-keword {
   grid-template-columns: 1fr 1fr 1fr 1fr !important;
 }
+
 .info-keword span {
   margin: 2rem 1rem !important;
   padding: 1rem !important;
   text-align: center;
   border-radius: 0.5rem;
 }
+
 .file-input {
   cursor: pointer;
 }
+
 #file-input {
   display: none;
 }
+
 .uploaded-box {
   position: relative;
   top: 0;

   text-align: center;
   gap: 1rem;
 }
+
 .email-sec div:nth-child(2) {
   padding: 1rem 0;
 }
-.address-sec > div {
+
+.address-sec>div {
   margin-bottom: 10px;
 }
+
 .address-sec .add-search input {
   flex: 0 0 79%;
 }

   color: #333;
   font-size: 1.4rem;
 }
-.keyword-label:checked + label {
+
+.keyword-label:checked+label {
   background: #d6e6ff;
   color: #007aff;
 }
+
 .keyword-wrap {
   padding: 1rem;
 }
+
 .keyword-wrap ul {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 1rem;
 }
+
 .select-keyword ul {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
 }
+
 .selected-keyword {
   background: #d6e6ff;
   color: #007aff;

 .selected-keyword span:nth-child(2) {
   cursor: pointer;
 }
+
 /* 로그인 모달창 css */
 .login-modal {
   margin: 0 auto;
   text-align: center;
 }
+
 .login-modal h1 {
   padding: 1rem 0;
 }
-.login-modal > p {
+
+.login-modal>p {
   padding: 1rem 0;
 }
 

   color: #fff;
   cursor: pointer;
 }
+
 /* 스와이퍼--------------------------------------- */
 .swiper-button-prev:after,
 .swiper-button-next:after {

 
 .main-benner .swiper {
   height: 260px;
-  padding: 0px 50px 50px 50px;
+  /* padding: 0px 50px 50px 50px; */
 }
 
 .swiper-2 {

   font-size: 1.7rem;
   color: white;
 }
+
 .swiper-slide {
   cursor: pointer;
 }
+
 /* .main-wrap-news-hidden .swiper-slide img {
   width: 77%;
   padding: 1rem;

 .slide1 {
   height: 32px;
   width: 98%;
-  padding: 1rem 1rem;
+  padding: 1.1rem 1rem;
   color: white;
   font-size: 1.3rem;
-  /* border-bottom: 0.5px dotted white; */
+  z-index: 100000;
 }
 
 .swiper-2 {

   display: flex;
   justify-content: space-between;
 }
+
 .userIDsearch-box-button input {
   display: none;
 }
+
 .userIDsearch-box-button div {
   width: 50%;
   padding: 2rem;

   border: 1px solid gainsboro;
   border-bottom: 0px;
 }
+
 .IDsearch-content {
   border: 1px solid gainsboro;
   padding: 3rem 1rem;
 }
+
 .IDsearch-content div:nth-child(1) p,
 .userpwsearch div:nth-child(1) p {
   font-size: 1.5rem;
   padding: 1rem 0;
 }
+
 .IDsearch-content details ul,
 .IDsearch-content-two details ul,
 .userpwsearch ul {

   margin: 0 auto;
   margin-bottom: 10px;
 }
+
 .IDsearch-content details li,
 .IDsearch-content-two details li,
 .userpwsearch li {

   justify-content: space-between;
   padding: 0.5rem 0;
 }
+
 .IDsearch-content details li input[type="text"],
 .userpwsearch li input[type="text"] {
   width: 60%;
 }
+
 .inbox-radio {
   display: flex;
 }
+
 .inbox-radio div {
   display: grid;
   padding: 0 3rem;
   grid-template-columns: 1fr 1fr;
 }
+
 .inbox-radio p {
   font-size: 1.5rem;
   padding: 3rem 0;
 }
+
 .IDsearch-content button,
 .userpwsearch button,
 .IDsearch-content-two button {
   width: 100%;
   margin-left: 0;
 }
+
 .userpwsearch {
   padding: 1rem;
   border: 1px solid gainsboro;
 }
+
 .userpwsearch ul {
   margin-bottom: 2rem;
 }

   border-radius: 1rem;
   transform: translate(-50%, -50%);
 }
+
 .pwchange-div p {
   font-size: 1.5rem;
   padding: 1rem 0;
   font-weight: 700;
 }
-.pwchange-div ul > li {
+
+.pwchange-div ul>li {
   padding: 0.5rem 0;
 }
-.pwchang-div > div:nth-child(1) {
+
+.pwchang-div>div:nth-child(1) {
   padding: 1rem 0;
 }
+
 .idsearch div span,
 .idsearch div input {
   margin-right: 2rem;

 
 .pwchange2-button .dark-gray-btn {
   margin: 0px;
-}
+}

d8e3a3e

f878e6d

client/views/layout/Header.vue

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

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


                             style="color: #ffffff;"></i> 회원가입</router-link>
                 </li>
             </ul> -->
-            <Menu class="menu" :isActive="isActive"></Menu>
+            <!-- <Menu class="menu" :isActive="isActive"></Menu> -->
         </div>
     </div>
 </template>

d8e3a3e

f878e6d

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

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

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


                     <div class="modal-content-box" v-if="modalItem">
                         <p class="modal-news-title">{{ modalItem.post_title }}</p>
                         <p v-if="realContent" v-html="realContent"></p>
-                        <ul v-if="realFileList">
-                            <p>첨부파일</p>
+                        <div class="flex-align-start">
+                            <p class="file-zone-title">첨부파일</p>
+                            <ul v-if="realFileList">
                             <li v-for="(file, idx) in realFileList" :key="idx" @click="downloadFile(file)">{{
                                 file.real_file_nm }}</li>
                         </ul>
-
+                        </div>
                     </div>
                     <!-- 모달 닫기 버튼 -->
                     <button @click="closeModal" class="blue-btn">닫기</button>

d8e3a3e

f878e6d

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

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

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


                                         1023: { slidesPerView: 3 }
                                     }" :modules="modules" class="mySwiper">
                                     <swiper-slide v-for="(item, idx) in postList" :key="idx">
-                                            <div class="modal-img" @click="openModal(item)">
-                                                <img :src="'http://localhost:8080' + item.file_path + '\\thumbnail_' + item.file_nm + '.' + item.file_extn_nm"
-                                                    alt="thumbnail" />
-                                                <p>{{ item.post_title }}</p>
-                                            </div>
+                                        <div class="modal-img" @click="openModal(item)">
+                                            <img :src="'http://localhost:8080' + item.file_path + '\\thumbnail_' + item.file_nm + '.' + item.file_extn_nm"
+                                                alt="thumbnail" />
+                                            <p>{{ item.post_title }}</p>
+                                        </div>
                                     </swiper-slide>
                                 </swiper>
                             </div>

             }).then(function (response) {
                 vm.noticeListForBanner = response.data;
                 console.log("1:::::::");
-                vm.swiperInit();
             }).catch(function (error) {
                 alert('배너 공지사항 목록 조회 오류, 관리자에게 문의하세요.');
             })

             this.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
         },
 
-        swiperInit: function () {
-            console.log("2::::::")
-            this.$nextTick(() => {
-                if (this.swiper) {
-                    this.swiper.destroy();
-                }
-                this.swiper = new Swiper('.swiper-notice', {
-                    direction: 'vertical',
-                    pagination: {
-                        clickable: true,
-                    },
-                    loop: true,
-                    spaceBetween: 8,
-                    slidesPerView: 1,
-                    centeredSlides: false,
-                    navigation: false,
-                    autoplay: {
-                        delay: 1000,
-                        disableOnInteraction: false,
-                    }
-                });
-            });
-        },
     },
     watch: {
 

         this.postSelectList();
         this.noticeListForMain();
         this.noticeBannerListForMain();
-        // this.swiperInit()
     }
 }
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -149,11 +149,11 @@
149	149	1023: { slidesPerView: 3 }
150	150	}" :modules="modules" class="mySwiper">
151	151	<swiper-slide v-for="(item, idx) in postList" :key="idx">
152		- <div class="modal-img" @click="openModal(item)">
153		- <img :src="'http://localhost:8080' + item.file_path + '\\thumbnail_' + item.file_nm + '.' + item.file_extn_nm"
154		- alt="thumbnail" />
155		- <p>{{ item.post_title }}</p>
156		- </div>
	152	+ <div class="modal-img" @click="openModal(item)">
	153	+ <img :src="'http://localhost:8080' + item.file_path + '\\thumbnail_' + item.file_nm + '.' + item.file_extn_nm"
	154	+ alt="thumbnail" />
	155	+ <p>{{ item.post_title }}</p>
	156	+ </div>
157	157	</swiper-slide>
158	158	</swiper>
159	159	</div>
...	...	@@ -427,7 +427,6 @@
427	427	}).then(function (response) {
428	428	vm.noticeListForBanner = response.data;
429	429	console.log("1:::::::");
430		- vm.swiperInit();
431	430	}).catch(function (error) {
432	431	alert('배너 공지사항 목록 조회 오류, 관리자에게 문의하세요.');
433	432	})
...	...	@@ -458,29 +457,6 @@
458	457	this.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
459	458	},
460	459
461		- swiperInit: function () {
462		- console.log("2::::::")
463		- this.$nextTick(() => {
464		- if (this.swiper) {
465		- this.swiper.destroy();
466		- }
467		- this.swiper = new Swiper('.swiper-notice', {
468		- direction: 'vertical',
469		- pagination: {
470		- clickable: true,
471		- },
472		- loop: true,
473		- spaceBetween: 8,
474		- slidesPerView: 1,
475		- centeredSlides: false,
476		- navigation: false,
477		- autoplay: {
478		- delay: 1000,
479		- disableOnInteraction: false,
480		- }
481		- });
482		- });
483		- },
484	460	},
485	461	watch: {
486	462
...	...	@@ -502,7 +478,6 @@
502	478	this.postSelectList();
503	479	this.noticeListForMain();
504	480	this.noticeBannerListForMain();
505		- // this.swiperInit()
506	481	}
507	482	}
508	483	</script>

...	...	@@ -51,9 +51,11 @@
51	51	.main-benner {
52	52	width: 100%;
53	53	}
	54	+
54	55	.main-benner-img img {
55	56	width: 100%;
56	57	}
	58	+
57	59	.main-notice {
58	60	grid-column: 1/3;
59	61	padding: 0 0 3rem;
...	...	@@ -68,28 +70,44 @@
68	70	.main-notice h2 i {
69	71	margin-right: 1rem;
70	72	}
	73	+
71	74	.modal-content iframe {
72	75	height: 300px;
73	76	}
	77	+
74	78	.modal-content-box {
75		- text-align: center;
76		- padding: 3rem;
	79	+ text-align: left;
	80	+ padding: 3rem 0;
77	81	height: 250px;
78	82	overflow-y: auto;
79	83	}
80		-.modal-content-box > p {
	84	+
	85	+.modal-content-box>p {
81	86	margin-bottom: 1.5rem;
82	87	}
	88	+
83	89	.modal-news-title {
84	90	font-size: 2rem;
85	91	font-weight: 600;
	92	+ color: #3f87f7;
86	93	}
	94	+
	95	+.file-zone-title {
	96	+ color: #3f87f7;
	97	+ flex: 0 0 10%;
	98	+}
	99	+
	100	+.modal-content-box>div>ul {
	101	+ flex: 0 0 85%;
	102	+}
	103	+
87	104	/* 퍼즐 */
88	105	.main-content-wrap {
89	106	width: 100%;
90	107	height: 100%;
91	108	padding: 60px;
92	109	}
	110	+
93	111	.swiper-slide .modal-img img {
94	112	width: 100%;
95	113	}
...	...	@@ -101,11 +119,11 @@
101	119	grid-template-columns: 1fr 1fr 1fr;
102	120	}
103	121
104		-.main-puzzle-container > div:nth-child(4) {
	122	+.main-puzzle-container>div:nth-child(4) {
105	123	position: relative;
106	124	}
107	125
108		-.main-puzzle-container > div:nth-child(4)::after {
	126	+.main-puzzle-container>div:nth-child(4)::after {
109	127	position: absolute;
110	128	content: "";
111	129	width: 90px;
...	...	@@ -278,19 +296,19 @@
278	296	margin: 0 auto;
279	297	}
280	298
281		-.main-wrap-news-hidden .swiper{
	299	+.main-wrap-news-hidden .swiper {
282	300	padding: 0 50px;
283	301	}
284	302
285		-.main-wrap-news-hidden .swiper-button-prev,
286		-.main-wrap-news-hidden .swiper-button-next{
	303	+.main-wrap-news-hidden .swiper-button-prev,
	304	+.main-wrap-news-hidden .swiper-button-next {
287	305	top: 60%;
288	306	width: 15px;
289	307	height: 15px;
290	308	}
291	309
292		-.main-wrap-news-hidden .swiper-button-prev:after,
293		-.main-wrap-news-hidden .swiper-button-next:after{
	310	+.main-wrap-news-hidden .swiper-button-prev:after,
	311	+.main-wrap-news-hidden .swiper-button-next:after {
294	312	font-size: 25px;
295	313	}
296	314
...	...	@@ -403,11 +421,13 @@
403	421	font-family: SBaggroM;
404	422	color: #09365e;
405	423	}
	424	+
406	425	/* 메인 뉴스 팝업창 */
407	426	.mySwiper .modal {
408	427	width: 100%;
409	428	background-color: #000000;
410	429	}
	430	+
411	431	/* 파트너사 */
412	432	.main-partner {
413	433	width: 100%;
...	...	@@ -520,7 +540,7 @@
520	540	background-color: #e2e2e2;
521	541	}
522	542
523		-.matching-box-grid > h3 {
	543	+.matching-box-grid>h3 {
524	544	font-size: 2.6rem;
525	545	padding: 3rem;
526	546	font-family: SBaggroM;
...	...	@@ -571,6 +591,7 @@
571	591	width: 100%;
572	592	height: 120px;
573	593	}
	594	+
574	595	.matchingbox-img img {
575	596	width: 100% !important;
576	597	}
...	...	@@ -807,7 +828,7 @@
807	828	grid-template-columns: 1fr 1fr 1fr;
808	829	}
809	830
810		-.modal-img > p{
	831	+.modal-img>p {
811	832	padding: 10px 0;
812	833	font-size: 1.6rem;
813	834	text-align: center;
...	...	@@ -863,11 +884,13 @@
863	884
864	885	font-family: SBaggroM;
865	886	}
	887	+
866	888	.data-bos {
867	889	width: 100%;
868	890	display: grid;
869	891	grid-template-columns: 70% 1fr;
870	892	}
	893	+
871	894	.data-text img {
872	895	width: 80px;
873	896	}
...	...	@@ -905,16 +928,19 @@
905	928	border-color: #3898ec;
906	929	outline: none;
907	930	}
	931	+
908	932	.dtail-navigation-in {
909	933	display: flex;
910	934	justify-content: end;
911	935	}
	936	+
912	937	.dtail-navigation-in button {
913	938	padding: 0.5rem 2rem;
914	939	background-color: #007aff;
915	940	color: white;
916	941	border-radius: 0.5rem;
917	942	}
	943	+
918	944	.data-detail-page {
919	945	padding: 0 0 6rem 0;
920	946	}
...	...	@@ -954,6 +980,7 @@
954	980
955	981	background-color: #ffffff;
956	982	}
	983	+
957	984	.data-bos-btn2::before {
958	985	height: 30rem;
959	986	position: absolute;
...	...	@@ -966,6 +993,7 @@
966	993
967	994	background-color: #ffffff;
968	995	}
	996	+
969	997	.data-bos-btn3::after {
970	998	height: 30rem;
971	999	position: absolute;
...	...	@@ -979,6 +1007,7 @@
979	1007	z-index: 1;
980	1008	background-color: var(--button-bg-color);
981	1009	}
	1010	+
982	1011	.data-banner {
983	1012	width: 100%;
984	1013	display: grid;
...	...	@@ -991,6 +1020,7 @@
991	1020	background-position: right bottom;
992	1021	background-size: 180px;
993	1022	}
	1023	+
994	1024	.data-bos-btn2 {
995	1025	padding: 2rem;
996	1026
...	...	@@ -998,12 +1028,14 @@
998	1028	background-position: center bottom;
999	1029	background-size: 220px;
1000	1030	}
	1031	+
1001	1032	.data-bos-btn3 {
1002	1033	padding: 2rem;
1003	1034	background: url(../jpg/data-2.png) no-repeat;
1004	1035	background-position: left bottom;
1005	1036	background-size: 150px;
1006	1037	}
	1038	+
1007	1039	.data-banner h2 {
1008	1040	font-size: 4rem;
1009	1041	display: flex;
...	...	@@ -1013,35 +1045,44 @@
1013	1045	font-family: SBaggroM;
1014	1046	font-weight: 500;
1015	1047	}
	1048	+
1016	1049	.data-bos-btn1 h2 {
1017	1050	text-align: left;
1018	1051	color: #014099;
1019	1052	}
	1053	+
1020	1054	.data-bos-btn1 span {
1021	1055	color: #0259c1;
1022	1056	}
	1057	+
1023	1058	.data-bos-btn2 h2 {
1024	1059	color: #0e5e2e;
1025	1060	justify-content: center;
1026	1061	}
	1062	+
1027	1063	.data-bos-btn2 span {
1028	1064	color: #1a8445;
1029	1065	}
	1066	+
1030	1067	.data-bos-btn3 h2 {
1031	1068	justify-content: end;
1032	1069	color: #c26400;
1033	1070	}
	1071	+
1034	1072	.data-bos-btn3 span {
1035	1073	color: #e07e27;
1036	1074	}
	1075	+
1037	1076	.data-bos-btn1 span,
1038	1077	.data-bos-btn2 span {
1039	1078	width: 100%;
1040	1079	}
	1080	+
1041	1081	.data-banner span {
1042	1082	font-weight: 400;
1043	1083	font-size: 1.7rem;
1044	1084	}
	1085	+
1045	1086	.data-banner button p {
1046	1087	width: 80%;
1047	1088	font-size: 1.5rem;
...	...	@@ -1050,9 +1091,11 @@
1050	1091	transform: translateY(-60px);
1051	1092	font-weight: 500;
1052	1093	}
	1094	+
1053	1095	.data-bos-btn1 p {
1054	1096	color: #014099;
1055	1097	}
	1098	+
1056	1099	.data-bos-btn2 p {
1057	1100	margin: 0 auto;
1058	1101	text-align: center;
...	...	@@ -1182,9 +1225,11 @@
1182	1225	.guide-sec {
1183	1226	padding: 3rem;
1184	1227	}
	1228	+
1185	1229	.guide-sec img {
1186	1230	width: 100%;
1187	1231	}
	1232	+
1188	1233	.guide-logo-bt {
1189	1234	background-color: #00335a;
1190	1235	padding-right: 3rem;
...	...	@@ -1259,6 +1304,7 @@
1259	1304	padding: 21px 10px;
1260	1305	background-color: #f9f9f9;
1261	1306	}
	1307	+
1262	1308	/* .tech-view .tech-info > * {
1263	1309	display: inline-block;
1264	1310	vertical-align: middle;
...	...	@@ -1273,6 +1319,7 @@
1273	1319	font-size: 2.5rem;
1274	1320	color: #007aff;
1275	1321	}
	1322	+
1276	1323	.tech-report button {
1277	1324	padding: 1rem 2rem;
1278	1325	color: white;
...	...	@@ -1280,15 +1327,18 @@
1280	1327	border-radius: 0.5rem;
1281	1328	font-weight: 700;
1282	1329	}
	1330	+
1283	1331	.tech-info {
1284	1332	padding: 31px 0 31px;
1285	1333	border-top: 1px solid #132331;
1286	1334	display: flex;
1287	1335	align-items: center;
1288	1336	}
	1337	+
1289	1338	.tech-info-img {
1290	1339	width: 500px;
1291	1340	}
	1341	+
1292	1342	.tech-info-img img {
1293	1343	padding: 22px 28px;
1294	1344	background: #f2f4f6;
...	...	@@ -1297,19 +1347,23 @@
1297	1347	text-align: center;
1298	1348	box-sizing: border-box;
1299	1349	}
	1350	+
1300	1351	.tech-txt-wrap {
1301	1352	width: 100%;
1302	1353	margin-left: 110px;
1303	1354	}
1304		-.tech-txt-wrap li > * {
	1355	+
	1356	+.tech-txt-wrap li>* {
1305	1357	display: inline-block;
1306	1358	font-weight: 400;
1307	1359	font-size: 2rem;
1308	1360	padding: 15px 0 15px;
1309	1361	}
	1362	+
1310	1363	.tech-txt-wrap li {
1311	1364	border-bottom: 1px solid #e5e5e5;
1312	1365	}
	1366	+
1313	1367	.tech-txt-wrap li strong {
1314	1368	min-width: 152px;
1315	1369	padding-left: 1.8rem;
...	...	@@ -1317,6 +1371,7 @@
1317	1371	position: relative;
1318	1372	font-weight: 700;
1319	1373	}
	1374	+
1320	1375	.tech-txt-wrap li strong::after {
1321	1376	position: absolute;
1322	1377	right: 0;
...	...	@@ -1327,10 +1382,12 @@
1327	1382	background: #a6a6a6;
1328	1383	content: "";
1329	1384	}
	1385	+
1330	1386	.tech-btn {
1331	1387	width: 100%;
1332	1388	padding: 21px 10px;
1333	1389	}
	1390	+
1334	1391	.tech-btn button {
1335	1392	float: right;
1336	1393	padding: 1rem 2rem;
...	...	@@ -1339,11 +1396,13 @@
1339	1396	border-radius: 0.5rem;
1340	1397	font-weight: 700;
1341	1398	}
	1399	+
1342	1400	.date {
1343	1401	text-align: left;
1344	1402	padding: 1rem 0;
1345	1403	font-size: 1.3rem;
1346	1404	}
	1405	+
1347	1406	/* 가리기 */
1348	1407	.tech-box-sec-img {
1349	1408	box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
...	...	@@ -1353,11 +1412,13 @@
1353	1412	background-color: white;
1354	1413	border-radius: 1rem;
1355	1414	}
	1415	+
1356	1416	.tech-box-fillter {
1357	1417	position: relative;
1358	1418	filter: blur(4px);
1359	1419	background-color: rgba(248, 248, 248, 0.5);
1360	1420	}
	1421	+
1361	1422	.overlay-text {
1362	1423	position: relative;
1363	1424	top: -50%;
...	...	@@ -1380,7 +1441,7 @@
1380	1441	}
1381	1442
1382	1443	.info-sec div,
1383		-.info-sec-1 > div {
	1444	+.info-sec-1>div {
1384	1445	display: grid;
1385	1446
1386	1447	border-bottom: 1px solid #333;
...	...	@@ -1392,43 +1453,53 @@
1392	1453	font-size: 1.5rem;
1393	1454	color: #007aff;
1394	1455	}
	1456	+
1395	1457	.pwinfro span {
1396	1458	padding: 2rem !important;
1397	1459	}
	1460	+
1398	1461	.info-sec div span {
1399	1462	padding: 3rem;
1400	1463	font-size: 1.2rem;
1401	1464	}
	1465	+
1402	1466	.info-sec button {
1403	1467	padding: 1rem 0.5rem;
1404	1468	background-color: #007aff;
1405	1469	color: white;
1406	1470	border-radius: 0.5rem;
1407	1471	}
	1472	+
1408	1473	.info-sec-1 div a {
1409	1474	padding: 3rem;
1410	1475	}
	1476	+
1411	1477	.info-keword-far {
1412	1478	grid-row: 1 / span 3;
1413	1479	}
1414		-.info-sec-1 > div > p {
	1480	+
	1481	+.info-sec-1>div>p {
1415	1482	padding: 3rem 0;
1416	1483	font-size: 1.2rem;
1417	1484	color: #007aff;
1418	1485	/* border-bottom: 1px solid #333; */
1419	1486	}
	1487	+
1420	1488	.info-sec-1 span {
1421	1489	padding: 3rem 0;
1422	1490	font-size: 1.2rem;
1423	1491	}
	1492	+
1424	1493	.company-logo {
1425	1494	margin: 2rem 0;
1426	1495	}
	1496	+
1427	1497	.company-info .blue-btn {
1428	1498	width: 50%;
1429	1499	margin: 0 auto;
1430	1500	text-align: center;
1431	1501	}
	1502	+
1432	1503	.info-sec-1 section img {
1433	1504	width: 260px;
1434	1505	height: 120px;
...	...	@@ -1472,17 +1543,20 @@
1472	1543	padding: 2rem;
1473	1544	border-radius: 0.5rem;
1474	1545	}
	1546	+
1475	1547	.info-sec p button {
1476	1548	padding: 0.5rem 0.5rem;
1477	1549	background-color: #007aff;
1478	1550	color: white;
1479	1551	border-radius: 0.5rem;
1480	1552	}
	1553	+
1481	1554	.info-pw-maill div {
1482	1555	display: flex;
1483	1556	border: 0px;
1484	1557	padding: 0 4rem;
1485	1558	}
	1559	+
1486	1560	/* Introduction css */
1487	1561	.intro {
1488	1562	width: 100%;
...	...	@@ -1500,6 +1574,7 @@
1500	1574	font-weight: 500;
1501	1575	color: #2c407f;
1502	1576	}
	1577	+
1503	1578	.info-keword {
1504	1579	padding: 0 !important;
1505	1580	text-align: left !important;
...	...	@@ -1507,6 +1582,7 @@
1507	1582	font-size: 1.5rem;
1508	1583	color: #007aff;
1509	1584	}
	1585	+
1510	1586	.intro-text {
1511	1587	padding: 3rem;
1512	1588	}
...	...	@@ -1550,6 +1626,7 @@
1550	1626	.intro-img img:nth-child(3) {
1551	1627	transform: translateY(-6.9rem);
1552	1628	}
	1629	+
1553	1630	.info-sec-summary p {
1554	1631	color: #000000;
1555	1632	}
...	...	@@ -1619,6 +1696,7 @@
1619	1696	padding: 1.5rem 0;
1620	1697	display: flex;
1621	1698	}
	1699	+
1622	1700	.matching-box-button div {
1623	1701	display: inline-block;
1624	1702	cursor: pointer;
...	...	@@ -1641,12 +1719,13 @@
1641	1719	color: #666;
1642	1720	}
1643	1721
1644		-.matching-box-button div input[type="radio"]:checked + label {
	1722	+.matching-box-button div input[type="radio"]:checked+label {
1645	1723	color: #007aff;
1646	1724	border-bottom: 0px;
1647	1725	background: linear-gradient(#71aef0, rgb(255, 255, 255));
1648	1726	border-bottom: 1px solid #fff;
1649	1727	}
	1728	+
1650	1729	.matching-wrap-sub {
1651	1730	width: 100%;
1652	1731	margin: 0 auto;
...	...	@@ -1657,14 +1736,17 @@
1657	1736	font-size: 4rem;
1658	1737	padding: 2rem 0;
1659	1738	}
	1739	+
1660	1740	.inbox {
1661	1741	display: grid;
1662	1742
1663	1743	grid-template-columns: 1fr;
1664	1744	}
	1745	+
1665	1746	.matching-section-box h2 {
1666	1747	font-size: 2rem;
1667	1748	}
	1749	+
1668	1750	.inbox-sub,
1669	1751	.outbox-sub {
1670	1752	padding: 6rem 0;
...	...	@@ -1684,6 +1766,7 @@
1684	1766	padding: 1.5rem 2.5rem;
1685	1767	box-shadow: 1px 1px 5px #33333344;
1686	1768	}
	1769	+
1687	1770	.inbox-img h4 {
1688	1771	font-size: 1.5rem;
1689	1772	text-align: left;
...	...	@@ -1695,6 +1778,7 @@
1695	1778	border-radius: 1rem;
1696	1779	margin-bottom: 30px;
1697	1780	}
	1781	+
1698	1782	.inbox-img-blur img {
1699	1783	filter: blur(1.5px);
1700	1784	box-shadow: 1px 1px 3px #33333337;
...	...	@@ -1734,6 +1818,7 @@
1734	1818	color: white;
1735	1819	font-weight: 700;
1736	1820	}
	1821	+
1737	1822	.inbox-img-box {
1738	1823	width: 260px;
1739	1824	height: 120px;
...	...	@@ -1747,10 +1832,12 @@
1747	1832	.matching-section-box {
1748	1833	padding: 6rem 3rem;
1749	1834	}
	1835	+
1750	1836	.downbtn-none {
1751	1837	display: none;
1752	1838	padding: 1rem !important;
1753	1839	}
	1840	+
1754	1841	.matchingbox-img {
1755	1842	width: 300px;
1756	1843	height: 175px;
...	...	@@ -1759,6 +1846,7 @@
1759	1846	background-color: #f9f9f9;
1760	1847	border-radius: 1rem;
1761	1848	}
	1849	+
1762	1850	/* 모달css */
1763	1851	.matchingmodal {
1764	1852	width: 100%;
...	...	@@ -1771,6 +1859,7 @@
1771	1859	background-color: rgb(0, 0, 0);
1772	1860	background-color: rgba(0, 0, 0, 0.4);
1773	1861	}
	1862	+
1774	1863	.matching-modal-box {
1775	1864	background-color: #fefefe;
1776	1865	margin: 15% auto;
...	...	@@ -1781,14 +1870,17 @@
1781	1870	text-align: center;
1782	1871	position: relative;
1783	1872	}
	1873	+
1784	1874	.matching-modal-box h1 {
1785	1875	font-size: 2rem;
1786	1876	text-align: left;
1787	1877	}
	1878	+
1788	1879	.matching-modal-box img {
1789	1880	margin: 0 auto;
1790	1881	padding: 3rem;
1791	1882	}
	1883	+
1792	1884	.matching-modal-box button {
1793	1885	width: 80%;
1794	1886	background-color: #007aff;
...	...	@@ -1820,7 +1912,7 @@
1820	1912	position: relative;
1821	1913	}
1822	1914
1823		-.join-imgbox > p {
	1915	+.join-imgbox>p {
1824	1916	width: 100%;
1825	1917	height: 100%;
1826	1918	top: 0;
...	...	@@ -1828,7 +1920,7 @@
1828	1920	position: absolute;
1829	1921	}
1830	1922
1831		-.join-imgbox > img {
	1923	+.join-imgbox>img {
1832	1924	width: 100%;
1833	1925	height: 100%;
1834	1926	position: absolute;
...	...	@@ -1904,7 +1996,7 @@
1904	1996	margin: 0 auto;
1905	1997	}
1906	1998
1907		-.login-info > div > p {
	1999	+.login-info>div>p {
1908	2000	color: rgb(255, 0, 0);
1909	2001	padding: 0 1rem;
1910	2002	font-size: 1.5rem;
...	...	@@ -2012,17 +2104,20 @@
2012	2104	color: #0e5e2e;
2013	2105	background-color: #e6fff1;
2014	2106	}
	2107	+
2015	2108	.join-b span {
2016	2109	font-size: 1.5rem;
2017	2110	font-family: "Pretendard-Regular";
2018	2111	color: #3f87f7;
2019	2112	}
	2113	+
2020	2114	.join-sub-input input[type="file"] {
2021	2115	width: 100%;
2022	2116	padding: 1rem;
2023	2117	border: 1px solid #eee;
2024	2118	border-radius: 5px;
2025	2119	}
	2120	+
2026	2121	.btn-upload-join {
2027	2122	width: 100%;
2028	2123	background-color: #3f87f7;
...	...	@@ -2032,9 +2127,11 @@
2032	2127	text-align: center;
2033	2128	color: white;
2034	2129	}
	2130	+
2035	2131	.login-info-grid-1 {
2036	2132	padding: 2rem 0;
2037	2133	}
	2134	+
2038	2135	#email_sel {
2039	2136	padding: 9px 62px;
2040	2137	}
...	...	@@ -2042,6 +2139,7 @@
2042	2139	.join-blue-btn {
2043	2140	width: 100% !important;
2044	2141	}
	2142	+
2045	2143	.login-info,
2046	2144	.login-info2 {
2047	2145	width: 100%;
...	...	@@ -2078,6 +2176,7 @@
2078	2176	font-size: 1.4rem;
2079	2177	padding: 0.5rem;
2080	2178	}
	2179	+
2081	2180	.j-s-3 {
2082	2181	padding: 1rem;
2083	2182	display: grid;
...	...	@@ -2122,40 +2221,50 @@
2122	2221	grid-template-columns: 180px 1fr;
2123	2222	gap: 5rem;
2124	2223	}
	2224	+
2125	2225	.info-th {
2126	2226	padding: 3rem 0 !important;
2127	2227	text-align: left !important;
2128	2228	}
	2229	+
2129	2230	.login-info-grid-3 {
2130	2231	width: 100%;
2131	2232	height: 100%;
2132	2233	padding: 1rem 0;
2133	2234	}
	2235	+
2134	2236	.info-sec-summary {
2135	2237	padding: 2rem 0;
2136	2238	grid-template-columns: 1fr !important;
2137	2239	}
	2240	+
2138	2241	.info-sec-summary div {
2139	2242	grid-template-columns: 1fr;
2140	2243	}
	2244	+
2141	2245	.info-sec-summary textarea {
2142	2246	height: 200px;
2143	2247	}
	2248	+
2144	2249	.info-keword {
2145	2250	grid-template-columns: 1fr 1fr 1fr 1fr !important;
2146	2251	}
	2252	+
2147	2253	.info-keword span {
2148	2254	margin: 2rem 1rem !important;
2149	2255	padding: 1rem !important;
2150	2256	text-align: center;
2151	2257	border-radius: 0.5rem;
2152	2258	}
	2259	+
2153	2260	.file-input {
2154	2261	cursor: pointer;
2155	2262	}
	2263	+
2156	2264	#file-input {
2157	2265	display: none;
2158	2266	}
	2267	+
2159	2268	.uploaded-box {
2160	2269	position: relative;
2161	2270	top: 0;
...	...	@@ -2253,12 +2362,15 @@
2253	2362	text-align: center;
2254	2363	gap: 1rem;
2255	2364	}
	2365	+
2256	2366	.email-sec div:nth-child(2) {
2257	2367	padding: 1rem 0;
2258	2368	}
2259		-.address-sec > div {
	2369	+
	2370	+.address-sec>div {
2260	2371	margin-bottom: 10px;
2261	2372	}
	2373	+
2262	2374	.address-sec .add-search input {
2263	2375	flex: 0 0 79%;
2264	2376	}
...	...	@@ -2295,23 +2407,28 @@
2295	2407	color: #333;
2296	2408	font-size: 1.4rem;
2297	2409	}
2298		-.keyword-label:checked + label {
	2410	+
	2411	+.keyword-label:checked+label {
2299	2412	background: #d6e6ff;
2300	2413	color: #007aff;
2301	2414	}
	2415	+
2302	2416	.keyword-wrap {
2303	2417	padding: 1rem;
2304	2418	}
	2419	+
2305	2420	.keyword-wrap ul {
2306	2421	display: grid;
2307	2422	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
2308	2423	gap: 1rem;
2309	2424	}
	2425	+
2310	2426	.select-keyword ul {
2311	2427	display: grid;
2312	2428	grid-template-columns: repeat(3, 1fr);
2313	2429	gap: 1rem;
2314	2430	}
	2431	+
2315	2432	.selected-keyword {
2316	2433	background: #d6e6ff;
2317	2434	color: #007aff;
...	...	@@ -2320,15 +2437,18 @@
2320	2437	.selected-keyword span:nth-child(2) {
2321	2438	cursor: pointer;
2322	2439	}
	2440	+
2323	2441	/* 로그인 모달창 css */
2324	2442	.login-modal {
2325	2443	margin: 0 auto;
2326	2444	text-align: center;
2327	2445	}
	2446	+
2328	2447	.login-modal h1 {
2329	2448	padding: 1rem 0;
2330	2449	}
2331		-.login-modal > p {
	2450	+
	2451	+.login-modal>p {
2332	2452	padding: 1rem 0;
2333	2453	}
2334	2454
...	...	@@ -2449,6 +2569,7 @@
2449	2569	color: #fff;
2450	2570	cursor: pointer;
2451	2571	}
	2572	+
2452	2573	/* 스와이퍼--------------------------------------- */
2453	2574	.swiper-button-prev:after,
2454	2575	.swiper-button-next:after {
...	...	@@ -2463,7 +2584,7 @@
2463	2584
2464	2585	.main-benner .swiper {
2465	2586	height: 260px;
2466		- padding: 0px 50px 50px 50px;
	2587	+ /* padding: 0px 50px 50px 50px; */
2467	2588	}
2468	2589
2469	2590	.swiper-2 {
...	...	@@ -2480,9 +2601,11 @@
2480	2601	font-size: 1.7rem;
2481	2602	color: white;
2482	2603	}
	2604	+
2483	2605	.swiper-slide {
2484	2606	cursor: pointer;
2485	2607	}
	2608	+
2486	2609	/* .main-wrap-news-hidden .swiper-slide img {
2487	2610	width: 77%;
2488	2611	padding: 1rem;
...	...	@@ -2500,10 +2623,10 @@
2500	2623	.slide1 {
2501	2624	height: 32px;
2502	2625	width: 98%;
2503		- padding: 1rem 1rem;
	2626	+ padding: 1.1rem 1rem;
2504	2627	color: white;
2505	2628	font-size: 1.3rem;
2506		- /* border-bottom: 0.5px dotted white; */
	2629	+ z-index: 100000;
2507	2630	}
2508	2631
2509	2632	.swiper-2 {
...	...	@@ -2526,9 +2649,11 @@
2526	2649	display: flex;
2527	2650	justify-content: space-between;
2528	2651	}
	2652	+
2529	2653	.userIDsearch-box-button input {
2530	2654	display: none;
2531	2655	}
	2656	+
2532	2657	.userIDsearch-box-button div {
2533	2658	width: 50%;
2534	2659	padding: 2rem;
...	...	@@ -2539,15 +2664,18 @@
2539	2664	border: 1px solid gainsboro;
2540	2665	border-bottom: 0px;
2541	2666	}
	2667	+
2542	2668	.IDsearch-content {
2543	2669	border: 1px solid gainsboro;
2544	2670	padding: 3rem 1rem;
2545	2671	}
	2672	+
2546	2673	.IDsearch-content div:nth-child(1) p,
2547	2674	.userpwsearch div:nth-child(1) p {
2548	2675	font-size: 1.5rem;
2549	2676	padding: 1rem 0;
2550	2677	}
	2678	+
2551	2679	.IDsearch-content details ul,
2552	2680	.IDsearch-content-two details ul,
2553	2681	.userpwsearch ul {
...	...	@@ -2555,6 +2683,7 @@
2555	2683	margin: 0 auto;
2556	2684	margin-bottom: 10px;
2557	2685	}
	2686	+
2558	2687	.IDsearch-content details li,
2559	2688	.IDsearch-content-two details li,
2560	2689	.userpwsearch li {
...	...	@@ -2563,32 +2692,39 @@
2563	2692	justify-content: space-between;
2564	2693	padding: 0.5rem 0;
2565	2694	}
	2695	+
2566	2696	.IDsearch-content details li input[type="text"],
2567	2697	.userpwsearch li input[type="text"] {
2568	2698	width: 60%;
2569	2699	}
	2700	+
2570	2701	.inbox-radio {
2571	2702	display: flex;
2572	2703	}
	2704	+
2573	2705	.inbox-radio div {
2574	2706	display: grid;
2575	2707	padding: 0 3rem;
2576	2708	grid-template-columns: 1fr 1fr;
2577	2709	}
	2710	+
2578	2711	.inbox-radio p {
2579	2712	font-size: 1.5rem;
2580	2713	padding: 3rem 0;
2581	2714	}
	2715	+
2582	2716	.IDsearch-content button,
2583	2717	.userpwsearch button,
2584	2718	.IDsearch-content-two button {
2585	2719	width: 100%;
2586	2720	margin-left: 0;
2587	2721	}
	2722	+
2588	2723	.userpwsearch {
2589	2724	padding: 1rem;
2590	2725	border: 1px solid gainsboro;
2591	2726	}
	2727	+
2592	2728	.userpwsearch ul {
2593	2729	margin-bottom: 2rem;
2594	2730	}
...	...	@@ -2616,17 +2752,21 @@
2616	2752	border-radius: 1rem;
2617	2753	transform: translate(-50%, -50%);
2618	2754	}
	2755	+
2619	2756	.pwchange-div p {
2620	2757	font-size: 1.5rem;
2621	2758	padding: 1rem 0;
2622	2759	font-weight: 700;
2623	2760	}
2624		-.pwchange-div ul > li {
	2761	+
	2762	+.pwchange-div ul>li {
2625	2763	padding: 0.5rem 0;
2626	2764	}
2627		-.pwchang-div > div:nth-child(1) {
	2765	+
	2766	+.pwchang-div>div:nth-child(1) {
2628	2767	padding: 1rem 0;
2629	2768	}
	2769	+
2630	2770	.idsearch div span,
2631	2771	.idsearch div input {
2632	2772	margin-right: 2rem;
...	...	@@ -2641,4 +2781,4 @@
2641	2781
2642	2782	.pwchange2-button .dark-gray-btn {
2643	2783	margin: 0px;
2644		-}
	2784	+} (No newline at end of file)

...	...	@@ -36,12 +36,13 @@
36	36	<div class="modal-content-box" v-if="modalItem">
37	37	<p class="modal-news-title">{{ modalItem.post_title }}</p>
38	38	<p v-if="realContent" v-html="realContent"></p>
39		- <ul v-if="realFileList">
40		- <p>첨부파일</p>
	39	+ <div class="flex-align-start">
	40	+ <p class="file-zone-title">첨부파일</p>
	41	+ <ul v-if="realFileList">
41	42	<li v-for="(file, idx) in realFileList" :key="idx" @click="downloadFile(file)">{{
42	43	file.real_file_nm }}</li>
43	44	</ul>
44		-
	45	+ </div>
45	46	</div>
46	47	<!-- 모달 닫기 버튼 -->
47	48	<button @click="closeModal" class="blue-btn">닫기</button>

Delete comment