From aa74ba8c20701569e6df7be0b6e4222b3834e006 Mon Sep 17 00:00:00 2001 From: ecpla Date: Mon, 31 Jul 2023 16:13:41 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=EB=B2=84=EC=A0=84?= =?UTF-8?q?=20css=20,=20js=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 | 33 +-- src/main/webapp/WEB-INF/tiles/inc/footer.jsp | 2 +- src/main/webapp/css/media.css | 190 ++++++++++-------- src/main/webapp/images/icon/icon-arr-top2.png | Bin 0 -> 1893 bytes 4 files changed, 121 insertions(+), 104 deletions(-) create mode 100644 src/main/webapp/images/icon/icon-arr-top2.png 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 95ea7d84..6e941227 100644 --- a/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp +++ b/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp @@ -44,7 +44,7 @@ $(document).ready(function() { var viewportHeight = $(window).height(); // Viewport Height var scrolltop = $(window).scrollTop(); // Scroll Top var y = $(element).offset().top; - var elementHeight = $(element).height(); + var elementHeight = $(element).height(); // 반드시 요소가 화면에 보여야 할경우 return (((y + elementHeight) < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight))); @@ -85,9 +85,10 @@ $(document).ready(function() { function fn_Move(seq) { //section 별 width 달라서 interval 처리 var container = $('html, body'); -// var scrollTo = $("#sec" + seq); var scrollTo = $(".sec").eq(seq); - var position = scrollTo.offset().top - container.offset().top - 100; + var alpha = 0; + if(seq == 5) (alpha = scrollTo.height()/10); + var position = scrollTo.offset().top - $('.wrap header').height() + alpha; container.animate({ scrollTop: position }); @@ -162,7 +163,7 @@ function fn_listPops(typeDivCd) { } - +

배너 섹션영역

@@ -231,18 +232,20 @@ function fn_listPops(typeDivCd) {
검색 -
- - +
+
+ + +
+
+ + + +
-
- - - -
diff --git a/src/main/webapp/WEB-INF/tiles/inc/footer.jsp b/src/main/webapp/WEB-INF/tiles/inc/footer.jsp index 6915468c..c4876371 100644 --- a/src/main/webapp/WEB-INF/tiles/inc/footer.jsp +++ b/src/main/webapp/WEB-INF/tiles/inc/footer.jsp @@ -29,7 +29,7 @@ $(document).ready(function(){ } }); - +
diff --git a/src/main/webapp/css/media.css b/src/main/webapp/css/media.css index c594e81b..dc0ad0d1 100644 --- a/src/main/webapp/css/media.css +++ b/src/main/webapp/css/media.css @@ -129,29 +129,34 @@ a.pop-logo img { margin-right: 10px; } .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%;} +.sec5 {padding:0% 2% 100px;} +.sec5 .keyword-box {width:100%;} + +.sec2 {padding:100px 2% 100px;} +.sec2 .pickSwiper {padding:1% 10% 12%;} +.sec2 .pickSwiper .swiper-slide .list-box .images a img {} + .sec3 {padding:100px 2% 100px;} -.sec3 .pickSwiper {padding:1% 10% 12%;} -.sec3 .pickSwiper .swiper-slide .list-box .images a img {} -.sec5 {padding:100px 2% 100px;} -.sec5 .popularSwiper {padding:1% 0% 1%;} -.sec5 .inner .tab_content {width:96%;padding:30px 1.9%;} -.sec5 .inner {width:100%;} -.sec6 {padding:100px 2% 100px;} -.sec6 .onlineSwiper {padding:1% 10% 12%;width:80%;margin:0;} -.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;width:96%;padding:100px 2% 100px;} -.sec7 .inner {width:100%;} -.sec7 .inner .Fl {width:100%;margin:0;margin-bottom:20px;} -.sec7 .inner .Fl .con .list .text {width:auto;} -.sec7 .inner .qna .con .list .text {width:auto;} -.sec7 .inner .Fl .con .list .box {margin-right:2%;} +.sec3 .popularSwiper {padding:1% 0% 1%;} +.sec3 .inner .tab_content {width:96%;padding:30px 1.9%;} +.sec3 .inner {width:100%;} + +.sec4 {padding:100px 2% 100px;} +.sec4 .onlineSwiper {padding:1% 10% 12%;width:80%;margin:0;} +.sec4 .inner .more-btn {right: 0%;} +.sec4 .onlineSwiper .swiper-slide {background:none;box-shadow:0 0 0;} +.sec4 .onlineSwiper::before {width:7%;box-shadow:0 0 0;} +.sec4 .onlineSwiper::after {right:-1px;width:7%;box-shadow:0 0 0;} +.sec4 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:15px;} +.sec4 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:15px;} + +.sec6 {vertical-align:top;width:96%;padding:100px 2% 100px;} +.sec6 .inner {width:100%;} +.sec6 .inner .Fl {width:100%;margin:0;margin-bottom:20px;} +.sec6 .inner .Fl .con .list .text {width:auto;} +.sec6 .inner .qna .con .list .text {width:auto;} +.sec6 .inner .Fl .con .list .box {margin-right:2%;} + footer {width:96%;padding: 40px 2% 60px;} footer .inner {width:100%;} footer .family_site {right:10px;} @@ -314,8 +319,8 @@ footer .family_site {right:10px;} .wrap .nav-wrap .Btn i::before { background: #fff; } .wrap .nav-wrap .Btn.selected i::after { bottom: 0; border-bottom: none; } .wrap .nav-wrap .Btn i::after { content: ""; position: absolute; left: 0; width: 25px; height: 2px; border-radius: 10px; background: #fff; border-color: #fff; } - .sec1 .inner .banner { height: 400px; background-position: -452px; } - .sec1 .inner .banner h3 { font-size: 22px; line-height: 30px; top: 110px;max-height: 70px; } + .sec1 .inner .banner { height: 400px; background-position: -452px; } + .sec1 .inner .banner h3 { font-size: 19px; line-height: 30px; top: 110px;max-height: 70px; } .sec1 .inner .banner p { font-size: 12px; line-height: 18px; top: 185px;max-height:103px;} .sec1 .inner .banner p > span { display: block; } .sec1 .inner .banner p:nth-of-type(2) {top:290px;} @@ -325,83 +330,88 @@ footer .family_site {right:10px;} .MainSwiper .swiper-slide .img img {object-fit:cover;width:100%;height:100%;} .MainSwiper .pagination {bottom: 55px;left: calc(50% - -135px);} - .sec1 .inner .search-wrap form .condition_sear {right: 189px;} - .sec1 .inner .search-wrap .ark_query {width:190px;} + .sec1 .inner .search-wrap form .condition_sear {right: 30%;} + .sec1 .inner .search-wrap .ark_query {width:34%;} .sec1 .inner .color-box { width: 100vw; padding: 0 16px; box-sizing: border-box; top: -45px; } .sec1 .inner .color-box .list { height: 85px; display: flex; align-items: center; flex-direction: column-reverse; } .sec1 .inner .color-box .list .title { font-size: 12px; line-height: 18px; margin: 8px 0px 9px; } .sec1 .inner .color-box .list .icon img { width: 32px; } .sec1 .inner .color-box .list .open { display: none; } - .sec2 { padding: 0px 0px 60px; } - .sec2 .keyword-box { width: 100vw; } + section h3 { font-size: 22px; margin-bottom: 0px; } section .inner p.desc { font-size: 14px; margin-bottom: 16px; } section .inner ul.list-tag { height: 66px; overflow: hidden;padding:5px 0px 0px; } - .sec3 { padding: 52px 0px 60px; } - .sec3 .pickSwiper::before, - .sec3 .pickSwiper::after { display: none; } - .sec3 .pickSwiper .swiper-slide .list-box { height: 310px; } - .sec3 .pickSwiper .swiper-slide .list-box .images { padding: 10px 0px; height: 185px; } - .sec3 .pickSwiper .swiper-slide .list-box .images a img {width:140px;} - .sec3 .pickSwiper .swiper-slide .list-box .subject { padding: 15px; } - .sec3 .pickSwiper .swiper-slide .list-box .subject .block { margin-bottom: 6px; } - .sec3 .pickSwiper .swiper-slide .list-box .subject .cla { padding: 5px 10px; border-radius: 85px; } - .sec3 .pickSwiper .swiper-slide .list-box .subject .tit { font-size: 14px; } - .swiper-button-next, - .swiper-button-prev { display: none; } - .sec4 .inner .middle-banner { background: url("/images/bg/bg-sec4-bg-mo.jpg") no-repeat; height: 200px;background-size:100%; } - .sec4 .inner .middle-banner h3 { padding: 40px 0px 10px; font-size: 22px; line-height: 33px; } - .sec4 .inner .middle-banner p { font-size: 14px; } - .sec5 { padding: 52px 0px 60px 16px; } - .sec5 .inner { width: 100%; } - .sec5 .inner .tabs { width: max-content; } - .sec5 .inner .tab_content { padding: 0 16px 0 0; margin-top: 30px; box-sizing: border-box; width: 100%; border: none; background: none; } - .sec5 .inner .tabs_item { padding: 0; } - .sec5 .inner .tabs_item ul li { background: #ffffff; border: 1px solid #dddddd; box-sizing: border-box; padding: 30px; } - .sec5 .inner .tabs_item ul li .con-1 .cla { padding: 5px 10px; } - .sec5 .inner .tabs_item ul li .con-1 .tit { font-size: 16px; } - .sec5 .inner .tabs_item ul li .con-2 p { font-size: 12px; } - .sec5 .popularSwiper .swiper-pagination-fraction {top:28px;} - .sec5 .popularSwiper .pagination {visibility:visible !important;} - .sec6 { padding: 52px 0px 60px; } - .sec6 .inner .more-btn {top:5px;right: 1%;} - .sec6 .inner .more-btn a {font-size:12px;padding:2px 10px 3px;} - .sec6 .inner .more-btn a span > span {display:none;} - .sec6 .inner .more-btn a span img {width:22px;} + + .sec2 { padding: 52px 0px 60px; } + .sec2 .pickSwiper::before, + .sec2 .pickSwiper::after { display: none; } + .sec2 .pickSwiper .swiper-slide .list-box { height: 310px; } + .sec2 .pickSwiper .swiper-slide .list-box .images { padding: 10px 0px; height: 185px; } + .sec2 .pickSwiper .swiper-slide .list-box .images a img {width:140px;} + .sec2 .pickSwiper .swiper-slide .list-box .subject { padding: 15px; } + .sec2 .pickSwiper .swiper-slide .list-box .subject .block { margin-bottom: 6px; } + .sec2 .pickSwiper .swiper-slide .list-box .subject .cla { padding: 5px 10px; border-radius: 85px; } + .sec2 .pickSwiper .swiper-slide .list-box .subject .tit { font-size: 14px; } + + .sec3 { padding: 52px 0px 60px 16px; } + .sec3 .inner { width: 100%; } + .sec3 .inner .tabs { width: max-content; } + .sec3 .inner .tab_content { padding: 0 16px 0 0; margin-top: 30px; box-sizing: border-box; width: 100%; border: none; background: none; } + .sec3 .inner .tabs_item { padding: 0; } + .sec3 .inner .tabs_item ul li { background: #ffffff; border: 1px solid #dddddd; box-sizing: border-box; padding: 30px; } + .sec3 .inner .tabs_item ul li .con-1 .cla { padding: 5px 10px; } + .sec3 .inner .tabs_item ul li .con-1 .tit { font-size: 16px; } + .sec3 .inner .tabs_item ul li .con-2 p { font-size: 12px; } + .sec3 .popularSwiper .swiper-pagination-fraction {top:28px;} + .sec3 .popularSwiper .pagination {visibility:visible !important;} + + .sec4 { padding: 52px 0px 60px; } + .sec4 .inner .more-btn {top:5px;right: 1%;} + .sec4 .inner .more-btn a {font-size:12px;padding:2px 10px 3px;} + .sec4 .inner .more-btn a span > span {display:none;} + .sec4 .inner .more-btn a span img {width:22px;} .popularSwiper .swiper-pagination { position: relative;top:10px; } .popularSwiper .swiper-pagination-bullet { background: #aaaaaa; border-radius: 30px; margin-right: 4px; opacity: unset !important; } .popularSwiper .swiper-pagination-bullet-active { background: #376795; width: 35px; height: 10px; } - .sec6 .onlineSwiper::before, - .sec6 .onlineSwiper::after { display: none; } - .sec6 .onlineSwiper {padding:1% 20% 12%;width:60%;} - .sec6 .onlineSwiper .items .List .inner div.thumbnail {width:100%;} - .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover > a {margin-bottom: 16px; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } - .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box { } - .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .view { width: 100%; } - .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS { display: none; } - .sec6 .onlineSwiper .items .List .inner div.thumbnail span.image-frame {width:100%;} - .sec6 .onlineSwiper .items .List .inner div.thumbnail span.image-frame img {max-width:initial;} + .sec4 .onlineSwiper::before, + .sec4 .onlineSwiper::after { display: none; } + .sec4 .onlineSwiper {padding:1% 20% 12%;width:60%;} + .sec4 .onlineSwiper .items .List .inner div.thumbnail {width:100%;} + .sec4 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover > a {margin-bottom: 16px; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } + .sec4 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box { } + .sec4 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .view { width: 100%; } + .sec4 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS { display: none; } + .sec4 .onlineSwiper .items .List .inner div.thumbnail span.image-frame {width:100%;} + .sec4 .onlineSwiper .items .List .inner div.thumbnail span.image-frame img {max-width:initial;} + .sec5 { padding: 0px 0px 60px; } + .sec5 .keyword-box { width: 100vw; } - .sec7 { padding: 54px 16px 60px; width: 100%; height: auto; box-sizing: border-box; } - .sec7 .inner { width: 100%; display: flex; flex-direction: column; } - .sec7 .inner .Fl { float: none; width: 100%; margin: 0; } - .sec7 .inner .Fl.notice { margin-bottom: 24px; } - .sec7 .inner .Fl .ti { display: flex; align-items: center; justify-content: space-between; } - .sec7 .inner .Fl .ti span { font-size: 18px; } - .sec7 .inner .Fl .ti a span { height: auto; } - .sec7 .inner .Fl .ti a span > span { display: none; } - .sec7 .inner .Fl .ti a span img { width: 22px; margin: 0; } - .sec7 .inner .Fl .con { padding: 0 20px; border: 1px solid #dddddd; border-radius: 5px; } - .sec7 .inner .Fl .con .list a { display: flex; } - .sec7 .inner .Fl .con .list .text { font-size: 16px; flex: 1;max-width: max-content; } - .sec7 .inner .Fl .con .list .text p { align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-right:30px; } - .sec7 .inner .Fl .con .list .text p img { margin: 0;margin-left:5px; } - .sec7 .inner .Fl .con .list .answer { display: none; } - .sec7 .inner .Fl .more {position:absolute;right:0%;top:5px;} - .sec7 .inner .Fl .more a span img {width:22px;} - .sec7 .inner .Fl .more a span > span {display:none;} + .sec6 { padding: 54px 16px 60px; width: 100%; height: auto; box-sizing: border-box; } + .sec6 .inner { width: 100%; display: flex; flex-direction: column; } + .sec6 .inner .Fl { float: none; width: 100%; margin: 0; } + .sec6 .inner .Fl.notice { margin-bottom: 24px; } + .sec6 .inner .Fl .ti { display: flex; align-items: center; justify-content: space-between; } + .sec6 .inner .Fl .ti span { font-size: 18px; } + .sec6 .inner .Fl .ti a span { height: auto; } + .sec6 .inner .Fl .ti a span > span { display: none; } + .sec6 .inner .Fl .ti a span img { width: 22px; margin: 0; } + .sec6 .inner .Fl .con { padding: 0 20px; border: 1px solid #dddddd; border-radius: 5px; } + .sec6 .inner .Fl .con .list a { display: flex; } + .sec6 .inner .Fl .con .list .text { font-size: 16px; flex: 1;max-width: max-content; } + .sec6 .inner .Fl .con .list .text p { align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-right:30px; } + .sec6 .inner .Fl .con .list .text p img { margin: 0;margin-left:5px; } + .sec6 .inner .Fl .con .list .answer { display: none; } + .sec6 .inner .Fl .more {position:absolute;right:0%;top:5px;} + .sec6 .inner .Fl .more a span img {width:22px;} + .sec6 .inner .Fl .more a span > span {display:none;} + + .swiper-button-next, + .swiper-button-prev { display: none; } + .sec7 .inner .middle-banner { background: url("/images/bg/bg-sec4-bg-mo.jpg") no-repeat; height: 192px;background-size:100%; } + .sec7 .inner .middle-banner h3 { padding: 40px 0px 10px; font-size: 22px; line-height: 33px; } + .sec7 .inner .middle-banner p { font-size: 14px; } footer { width:100%;padding: 20px 0px 16px; position: relative; height: auto; box-sizing: border-box; } footer .inner { width: 100%; box-sizing: border-box; } @@ -423,7 +433,7 @@ footer .family_site {right:10px;} footer .copy span:first-child { display: block; } footer .copy br { display: none; } .btn-go-top span:nth-of-type(2) { display: none; } - .btn-go-top img { width: 24px; } + .btn-go-top img { width: 20px; margin-bottom: 5px;} #mo-member-btn { display: block; } .wrap footer {padding-bottom:100px;} .wrap.sub footer {padding-bottom:16px;} @@ -1161,6 +1171,10 @@ footer .family_site {right:10px;} .loan-data .inner .tabs_item .list-wrap .list-data div.list > div.n-return::before { content: "반납예정일: "; } .loan-data .inner .tabs_item .list-wrap .list-data div.list > div.n-use span {margin-right:10px;} } +@media all and (max-width: 479px) { + .sec1 .inner .search-wrap .ark_query {width: 22%;} + .sec1 .inner .search-wrap form .condition_sear {right: 35%;} +} /* 팝업 */ @media all and (max-width: 479px) { /* 공통 */ diff --git a/src/main/webapp/images/icon/icon-arr-top2.png b/src/main/webapp/images/icon/icon-arr-top2.png new file mode 100644 index 0000000000000000000000000000000000000000..080fd38050d04fbeec47a44662fbaf4bb931ea6f GIT binary patch literal 1893 zcmbVNZD`$87|sTpTW2?>9f*pC^pD!+^X7geHm>#F+IH^N+TPJlrQONN$-SXBIWbA^ zz3qO;WNNKU5J9(fR>3+Dt>|RJkYWE+kiq^q&`uE%bt*zP@MAKjp4_i>(r&{*l9Qb0 zJkR@e-t&B4Z&zc(?F|$~HTHC;`pLVA+*>xRC(rK>F6|<(jc)gDpQ1M18s2ND!$)qT zsP&?i848BdJ5`8n4j5QRT*-C`nxfjams|ixQ9$b`YdIRT^zkPQZ5bLf7)=XlH;Hmq z_k@QACVDe)ViYO{v;6_Ot)vnH8wG$a*?GrTOBz$=RmnK~%`yJADD6x*;Tw_QfA9|J>SlFRMMxf)dKx2rh6(4N3 zPV4y9IFX3)CE)TRCxkwgfd;JO+%Yd-7B?V|^2kO`;1jG^$GSNjU_Xafp{`F~B|u`E zPS-V7w8ggT5`NHGAZ}CxvLf2gjJt^MM?N0&AnGg-Gn+$iTs7$-5MVEZalV$RzM9Fj zBy$pd&!FWPxai-zYynDv0BH=#T7(tiY(&h6QB@RFS!@v$RS+uBG&U@Ad_}0JM&nmO zNzE7_0M`W@P&Kh<1LCk{gDm1*C(F?FFsezM#~u+T)+Mhqhwjp)!+L{wvY#Iwjo1Nr5wp;ZQ9G{u-K#buM&Vn$gqO0Wuw zCdi&h#7sRV$P$pkYAzRu+HLtHb>r3jF@T<|j`9{=t_c;uu+}vOhDk;SQ~hnN5RV&D zuC6cU5Fx!r@+;~-HiIJYP)C-;?z+XruWCGY3dmb#z6(4+dJOV>jWIoJ)4+A}76hTM ze8DlQJGY)4I>7XmT3J=c2Zd{g=*CK>;`@prT3+=3Cq&io!yIt3h;(S437z4?R#r(q z|KGYO&n;_vH8|;|;jrGt$w&PhKn|hyNSFWTxBH(ZC&byFR7WOpVBvFZN3x@7;libx zXS-ki^ox_y-0_po%(b}dc27O-u5;SoKi>4~+*)S#rNOrv_K!?`eN)5Iz}n%2d+xOI z)Io5x{m6&h=^b}$Y;FFI-L?793;UV}w_dnq>#HaJesS`v$&0`2eBy6obX(~;ZRUfY z_C+6?Exx`uGQaoE^ZWnWF!biQx%son`Ll1|B~DYL@~PH$oB2Q2EZn{4z?5+&xn-|+ e`P9fvrmNwJP5wJ=(_P^~*wfjYdhfwKPyY*in|G%G literal 0 HcmV?d00001