From d01f1f0864b89ff250ee511130fd13b23ecf27ea Mon Sep 17 00:00:00 2001 From: com02 Date: Mon, 29 Nov 2021 14:22:43 +0900 Subject: [PATCH] =?UTF-8?q?home.jsp=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp | 34 +++++++++------- src/main/webapp/css/default.css | 2 +- src/main/webapp/css/media.css | 39 ++++++++++++++++--- 3 files changed, 55 insertions(+), 20 deletions(-) diff --git a/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp b/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp index 962dc731..f91ef9c9 100644 --- a/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp +++ b/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp @@ -423,9 +423,20 @@ function fn_listPops(typeDivCd) { var windowWidth = $(window).width(); var _slidesPerView = 5; + var _slidesPerViewpopula = 4; + var _slidesPerViewOnline = 7; var _spaceBetween = 30; + + if (windowWidth < 1400) { + _slidesPerView = 3; + _slidesPerViewpopula = 2; + _slidesPerViewOnline = 3; + _spaceBetween = 20; + } if (windowWidth < 480) { _slidesPerView = 1; + _slidesPerViewpopula = 1; + _slidesPerViewOnline = 1.5; _spaceBetween = 20; } @@ -451,19 +462,16 @@ function fn_listPops(typeDivCd) { */ }); - var _slidesPerViewOnline = 7; - if (windowWidth < 480) { - _slidesPerViewOnline = 1.5; - /* 유형별 인기자료 */ - var swiper = new Swiper(".popularSwiper", { - slidesPerView : 1, - spaceBetween : _spaceBetween, - centeredSlides : true, - pagination : { - el : ".swiper-pagination", - }, - }); - } + /* 인기자료 */ + var swiper = new Swiper(".popularSwiper", { + loop: true, + slidesPerView : _slidesPerViewpopula, + spaceBetween : _spaceBetween, + centeredSlides : false, + pagination : { + el : ".swiper-pagination", + }, + }); /* 온라인 자료관 */ var swiper = new Swiper(".onlineSwiper", { diff --git a/src/main/webapp/css/default.css b/src/main/webapp/css/default.css index 23c29144..bf68a72d 100644 --- a/src/main/webapp/css/default.css +++ b/src/main/webapp/css/default.css @@ -550,7 +550,7 @@ transform: rotate(45deg); .join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(2) button {background:#0b2c57;border:1px solid #ddd;border-radius:3px;width:100%;display:inline-block;font-size:15px;font-weight:600;height:47px;line-height:44px;} .join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(2) button span {font-size:16px;color:#fff;font-weight: 500;} .join.connect .inner .row-bottom .join-box .success .text p:nth-of-type(2) button span:nth-of-type(1) {border-right:1px solid #777;margin-right:10px;padding-right:10px;} -.join.connect .inner .row-bottom .join-box .success .box {background: #f0f0f0;display: inline-block;width:30%;padding:3% 35%;border-radius: 3px;border:1px solid #ddd;} +.join.connect .inner .row-bottom .join-box .success .box {background: #f0f0f0;display: inline-block;width:100%;padding:3% 0%;border-radius: 3px;border:1px solid #ddd;display: flex;align-items: center;justify-content: center;} .join.connect .inner .row-bottom .join-box .success .box::before {background: #f0f0f0;border-top:1px solid #ddd;border-left:1px solid #ddd;} .join.connect .inner .row-bottom .join-box .success .box .icon {float:left;margin-right:10px;} .join-box .success .box .icon.kakao {background: #ffeb00;border-radius:50%;} diff --git a/src/main/webapp/css/media.css b/src/main/webapp/css/media.css index 0dbe6e32..10cf11b9 100644 --- a/src/main/webapp/css/media.css +++ b/src/main/webapp/css/media.css @@ -116,24 +116,29 @@ a.pop-logo img { margin-right: 10px; } .sec1 .inner .banner p > span { display: block; } .sec1 .inner .banner p:nth-of-type(2) {top:260px;} .sec1 .inner .color-box {width:100vw;padding:0px 50px;box-sizing: border-box;top:-70px;} -.sec1 .inner .color-box .list {height:180px;} +.sec1 .inner .color-box .list {height:150px;} .sec1 .inner .color-box .list .title {font-size:18px;margin:20px 0px 10px;} .contents {width:96%;padding:0% 2%;} +.sec2 {padding:0% 2% 100px;} .sec2 .keyword-box {width:100%;} +.sec3 {padding:100px 2% 100px;} .sec3 .pickSwiper .swiper-slide .list-box .images a img {width:100%;} +.sec5 {padding:100px 2% 100px;} .sec5 .inner .tab_content {width:96%;padding:30px 1.9%;} .sec5 .inner {width:100%;} +.sec6 {padding:100px 2% 100px;} .sec6 .inner .more-btn {right: 0%;} .sec6 .onlineSwiper .swiper-slide {background:none;box-shadow:0 0 0;} .sec6 .onlineSwiper::before {width:7%;box-shadow:0 0 0;} .sec6 .onlineSwiper::after {right:-1px;width:7%;box-shadow:0 0 0;} .sec6 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:15px;} .sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:15px;} -.sec7 {vertical-align:top;} +.sec7 {vertical-align:top;width:96%;padding:100px 2% 100px;} .sec7 .inner {width:100%;} .sec7 .inner .Fl .con .list .text {width:53%;} .sec7 .inner .qna .con .list .text {width:40%;} .sec7 .inner .Fl .con .list .box {margin-right:2%;} +footer {width:96%;padding: 40px 2% 60px;} footer .inner {width:100%;} footer .family_site {right:10px;} .map .inner .info-box {width: 96%;padding:0% 2%;} @@ -165,12 +170,17 @@ footer .family_site {right:10px;} .guide .inner .row-bottom .guide-box .banner .right .list-box .li .text p:nth-of-type(1) { height: 50px; display: flex; align-items: center; font-size: 16px; margin-bottom: 16px; } .guide .inner .row-bottom .guide-box .banner .right .list-box .li .text p:nth-of-type(2) { font-size: 12px; margin-left: -60px; } -.myinfo .inner .row-bottom .myinfo-box .top-info {width:96%;padding:0% 2%;} +.myinfo .inner .row-bottom .myinfo-box .top-info {width:96%;padding:30px 2%;} +.myinfo .inner .row-bottom .myinfo-box .top-info .left {padding-right:2%;} .myinfo .inner .row-bottom .myinfo-box .top-info .left {width:23%;} .myinfo .inner .row-bottom .myinfo-box .top-info .right {width:70%;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-1 .list-box > div {width:18.8%;} .myinfo .inner .row-bottom .myinfo-box .top-info .right .top-box > .con-2 .list-box > div {width:23.8%;} -.cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-data > div.img {margin-right:0;} +.myinfo .contents .loan-history .list-box .list > div.tit {width:20%;} +.myinfo .contents .loan-history .list-box .list > div.con {width:70%;} +.myinfo .contents .visit-history .list-box .list > div.tit {width:20%;} +.myinfo .contents .visit-history .list-box .list > div.con {width:70%;} +.cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-data > div.img {margin-right:0;padding:0px 20px;} .privacy .top-bg {width:100%;} .privacy .con {width:100%;} .service .top-bg {width:100%;} @@ -195,7 +205,24 @@ footer .family_site {right:10px;} .qna .title .right {width:50%;} .qna .list-table-wrap li .t-writer {width:25%;} .qna .list-table-wrap li .t-date {width:10%;} - +.qna .list-table-wrap li .t-tit {width:30%;} +.greeting .inner .row-bottom .greeting-box .gree .left {width:100%;margin:0;text-align:left;} +.greeting .inner .row-bottom .greeting-box .gree .right {width:100%;} +.qna-write-table .wt-title {width:84%;} +.myinfo .inner .row-bottom .myinfo-box .top-info .left {padding-right:2%;} +.cart .inner .loan-confirm .tabs_item .visit-select-box .select-box > div {display:inline;} +.interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-data > div.img {padding:0% 10px;} +.interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-chk {width:12%;} +.interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-chk {line-height:12px !important;} +.loan-data .inner .tabs_item .list-wrap .list-data div.list > div.n-cultural {width:25%;} +.loan-data .inner .tabs_item .list-wrap .list-data div.list > div.n-data {width:35%;} +.visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-cultural {width:25%;} +.visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-data {width:32%;} +.visit-data .inner .tabs_item .list-wrap .list-data div.list > div.n-state button {margin:0;float:none;text-align:center;} +.join .inner .row-bottom {width:96%;padding:0% 2%;} +.cart .inner .tabs_item .list-cart-wrap.confirm .list-cart div.list > div.t-visit {margin-top:0;} +.data.detail .inner .row-top .center .right .con-2 .b-btn button {margin-right:0;} +.cart .inner .tabs_item .list-cart-wrap .list-cart div.list > div.t-visit.long {font-size:13px;padding:5px 0px;} } /* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/ @@ -323,7 +350,7 @@ footer .family_site {right:10px;} .sec7 .inner .Fl .more a span img {width:22px;} .sec7 .inner .Fl .more a span > span {display:none;} - footer { padding: 20px 0px 16px; position: relative; height: auto; box-sizing: border-box; } + footer { width:100%;padding: 20px 0px 16px; position: relative; height: auto; box-sizing: border-box; } footer .inner { width: 100%; box-sizing: border-box; } footer .row-top { display: flex; flex-direction: column; align-items: center; } footer .row-top .footer-logo img { width: 140px; }