somang4819/itsm_ysm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

모바일버전 css , js 수정

Browse Source
This commit is contained in:
ecpla 2023-07-31 16:13:41 +09:00
parent 90a09cdef8
commit aa74ba8c20
4 changed files with 121 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
View File

@ -44,7 +44,7 @@ $(document).ready(function() {
var viewportHeight = $(window).height(); // Viewport Height var viewportHeight = $(window).height(); // Viewport Height
var scrolltop = $(window).scrollTop(); // Scroll Top var scrolltop = $(window).scrollTop(); // Scroll Top
var y = $(element).offset().top; var y = $(element).offset().top;
var elementHeight = $(element).height(); var elementHeight = $(element).height();
// 반드시 요소가 화면에 보여야 할경우 // 반드시 요소가 화면에 보여야 할경우
return (((y + elementHeight) < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight))); return (((y + elementHeight) < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
@ -85,9 +85,10 @@ $(document).ready(function() {
function fn_Move(seq) { function fn_Move(seq) {
//section 별 width 달라서 interval 처리 //section 별 width 달라서 interval 처리
var container = $('html, body'); var container = $('html, body');
// var scrollTo = $("#sec" + seq);
var scrollTo = $(".sec").eq(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({ container.animate({
scrollTop: position scrollTop: position
}); });
@ -162,7 +163,7 @@ function fn_listPops(typeDivCd) {
} }
</script> </script>
<button type="button" id="btn-scroll" class="btn-scroll btn-scroll-fix" onclick="fn_Move(2)"></button> <button type="button" id="btn-scroll" class="btn-scroll btn-scroll-fix" onclick="fn_Move(1)"></button>
<!-- 섹션1 --> <!-- 섹션1 -->
<section id="sec1" class="sec sec1"> <section id="sec1" class="sec sec1">
<h2 class="blind">배너 섹션영역</h2> <h2 class="blind">배너 섹션영역</h2>
@ -231,18 +232,20 @@ function fn_listPops(typeDivCd) {
<input type="hidden" name="filter_mylist"> <input type="hidden" name="filter_mylist">
<fieldset> <fieldset>
<legend>검색</legend> <legend>검색</legend>
<div class="condition_sear"> <div>
<select name="sfield" id="sfield" class="sear_depth" title="검색대상"> <div class="condition_sear">
<option value="" selected="selected">전체</option> <select name="sfield" id="sfield" class="sear_depth" title="검색대상">
<option value="TITLE">제목</option> <option value="" selected="selected">전체</option>
</select> <option value="TITLE">제목</option>
<label for="sfield" style="display:none">검색대상</label> </select>
<label for="sfield" style="display:none">검색대상</label>
</div>
<div class="search-input">
<input type="text" title="검색어 입력" name="query" id="top_query" class="ark_query" value="" autocomplete="off"><label for="top_query" style="display:none">검색어</label>
<button type="button" class="btn-search" id="searchHeaderButton" onclick="goSearch();"><span>검색</span></button>
<button type="button" class="btn-search-detail" id="btn-search-detail-cl">상세<span>검색</span></button>
</div>
</div> </div>
<div class="search-input">
<input type="text" placeholder="검색어를 입력해주세요" title="검색어 입력" name="query" id="top_query" class="ark_query" value="" autocomplete="off"><label for="top_query" style="display:none">검색어</label>
<button type="button" class="btn-search" id="searchHeaderButton" onclick="goSearch();"><span>검색</span></button>
<button type="button" class="btn-search-detail" id="btn-search-detail-cl">상세<span>검색</span></button>
</div>
</fieldset> </fieldset>
</form> </form>
</div> </div>

2
src/main/webapp/WEB-INF/tiles/inc/footer.jsp
View File

@ -29,7 +29,7 @@ $(document).ready(function(){
} }
}); });
</script> </script>
<button type="button" id="btn-go-top" class="mo-go-top btn-go-top"><span><img src="/images/icon/icon-arr-top.png" alt="상단 화살표"></span><span>TOP</span></button> <button type="button" id="btn-go-top" class="mo-go-top btn-go-top"><span><img src="/images/icon/icon-arr-top2.png" alt="상단 화살표"></span><span>TOP</span></button>
<div class="inner"> <div class="inner">
<div class="row-top"> <div class="row-top">

190
src/main/webapp/css/media.css
View File

@ -129,29 +129,34 @@ a.pop-logo img { margin-right: 10px; }
.sec1 .inner .color-box .list {height:150px;} .sec1 .inner .color-box .list {height:150px;}
.sec1 .inner .color-box .list .title {font-size:18px;margin:20px 0px 10px;} .sec1 .inner .color-box .list .title {font-size:18px;margin:20px 0px 10px;}
.contents {width:96%;padding:0% 2%;} .contents {width:96%;padding:0% 2%;}
.sec2 {padding:0% 2% 100px;} .sec5 {padding:0% 2% 100px;}
.sec2 .keyword-box {width:100%;} .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 {padding:100px 2% 100px;}
.sec3 .pickSwiper {padding:1% 10% 12%;} .sec3 .popularSwiper {padding:1% 0% 1%;}
.sec3 .pickSwiper .swiper-slide .list-box .images a img {} .sec3 .inner .tab_content {width:96%;padding:30px 1.9%;}
.sec5 {padding:100px 2% 100px;} .sec3 .inner {width:100%;}
.sec5 .popularSwiper {padding:1% 0% 1%;}
.sec5 .inner .tab_content {width:96%;padding:30px 1.9%;} .sec4 {padding:100px 2% 100px;}
.sec5 .inner {width:100%;} .sec4 .onlineSwiper {padding:1% 10% 12%;width:80%;margin:0;}
.sec6 {padding:100px 2% 100px;} .sec4 .inner .more-btn {right: 0%;}
.sec6 .onlineSwiper {padding:1% 10% 12%;width:80%;margin:0;} .sec4 .onlineSwiper .swiper-slide {background:none;box-shadow:0 0 0;}
.sec6 .inner .more-btn {right: 0%;} .sec4 .onlineSwiper::before {width:7%;box-shadow:0 0 0;}
.sec6 .onlineSwiper .swiper-slide {background:none;box-shadow:0 0 0;} .sec4 .onlineSwiper::after {right:-1px;width:7%;box-shadow:0 0 0;}
.sec6 .onlineSwiper::before {width:7%;box-shadow:0 0 0;} .sec4 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:15px;}
.sec6 .onlineSwiper::after {right:-1px;width:7%;box-shadow:0 0 0;} .sec4 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:15px;}
.sec6 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:15px;}
.sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:15px;} .sec6 {vertical-align:top;width:96%;padding:100px 2% 100px;}
.sec7 {vertical-align:top;width:96%;padding:100px 2% 100px;} .sec6 .inner {width:100%;}
.sec7 .inner {width:100%;} .sec6 .inner .Fl {width:100%;margin:0;margin-bottom:20px;}
.sec7 .inner .Fl {width:100%;margin:0;margin-bottom:20px;} .sec6 .inner .Fl .con .list .text {width:auto;}
.sec7 .inner .Fl .con .list .text {width:auto;} .sec6 .inner .qna .con .list .text {width:auto;}
.sec7 .inner .qna .con .list .text {width:auto;} .sec6 .inner .Fl .con .list .box {margin-right:2%;}
.sec7 .inner .Fl .con .list .box {margin-right:2%;}
footer {width:96%;padding: 40px 2% 60px;} footer {width:96%;padding: 40px 2% 60px;}
footer .inner {width:100%;} footer .inner {width:100%;}
footer .family_site {right:10px;} 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 i::before { background: #fff; }
.wrap .nav-wrap .Btn.selected i::after { bottom: 0; border-bottom: none; } .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; } .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 { height: 400px; background-position: -452px; }
.sec1 .inner .banner h3 { font-size: 22px; line-height: 30px; top: 110px;max-height: 70px; } .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 { font-size: 12px; line-height: 18px; top: 185px;max-height:103px;}
.sec1 .inner .banner p > span { display: block; } .sec1 .inner .banner p > span { display: block; }
.sec1 .inner .banner p:nth-of-type(2) {top:290px;} .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 .swiper-slide .img img {object-fit:cover;width:100%;height:100%;}
.MainSwiper .pagination {bottom: 55px;left: calc(50% - -135px);} .MainSwiper .pagination {bottom: 55px;left: calc(50% - -135px);}
.sec1 .inner .search-wrap form .condition_sear {right: 189px;} .sec1 .inner .search-wrap form .condition_sear {right: 30%;}
.sec1 .inner .search-wrap .ark_query {width:190px;} .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 { 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 { 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 .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 .icon img { width: 32px; }
.sec1 .inner .color-box .list .open { display: none; } .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 h3 { font-size: 22px; margin-bottom: 0px; }
section .inner p.desc { font-size: 14px; margin-bottom: 16px; } section .inner p.desc { font-size: 14px; margin-bottom: 16px; }
section .inner ul.list-tag { height: 66px; overflow: hidden;padding:5px 0px 0px; } section .inner ul.list-tag { height: 66px; overflow: hidden;padding:5px 0px 0px; }
.sec3 { padding: 52px 0px 60px; }
.sec3 .pickSwiper::before, .sec2 { padding: 52px 0px 60px; }
.sec3 .pickSwiper::after { display: none; } .sec2 .pickSwiper::before,
.sec3 .pickSwiper .swiper-slide .list-box { height: 310px; } .sec2 .pickSwiper::after { display: none; }
.sec3 .pickSwiper .swiper-slide .list-box .images { padding: 10px 0px; height: 185px; } .sec2 .pickSwiper .swiper-slide .list-box { height: 310px; }
.sec3 .pickSwiper .swiper-slide .list-box .images a img {width:140px;} .sec2 .pickSwiper .swiper-slide .list-box .images { padding: 10px 0px; height: 185px; }
.sec3 .pickSwiper .swiper-slide .list-box .subject { padding: 15px; } .sec2 .pickSwiper .swiper-slide .list-box .images a img {width:140px;}
.sec3 .pickSwiper .swiper-slide .list-box .subject .block { margin-bottom: 6px; } .sec2 .pickSwiper .swiper-slide .list-box .subject { padding: 15px; }
.sec3 .pickSwiper .swiper-slide .list-box .subject .cla { padding: 5px 10px; border-radius: 85px; } .sec2 .pickSwiper .swiper-slide .list-box .subject .block { margin-bottom: 6px; }
.sec3 .pickSwiper .swiper-slide .list-box .subject .tit { font-size: 14px; } .sec2 .pickSwiper .swiper-slide .list-box .subject .cla { padding: 5px 10px; border-radius: 85px; }
.swiper-button-next, .sec2 .pickSwiper .swiper-slide .list-box .subject .tit { font-size: 14px; }
.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%; } .sec3 { padding: 52px 0px 60px 16px; }
.sec4 .inner .middle-banner h3 { padding: 40px 0px 10px; font-size: 22px; line-height: 33px; } .sec3 .inner { width: 100%; }
.sec4 .inner .middle-banner p { font-size: 14px; } .sec3 .inner .tabs { width: max-content; }
.sec5 { padding: 52px 0px 60px 16px; } .sec3 .inner .tab_content { padding: 0 16px 0 0; margin-top: 30px; box-sizing: border-box; width: 100%; border: none; background: none; }
.sec5 .inner { width: 100%; } .sec3 .inner .tabs_item { padding: 0; }
.sec5 .inner .tabs { width: max-content; } .sec3 .inner .tabs_item ul li { background: #ffffff; border: 1px solid #dddddd; box-sizing: border-box; padding: 30px; }
.sec5 .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 ul li .con-1 .cla { padding: 5px 10px; }
.sec5 .inner .tabs_item { padding: 0; } .sec3 .inner .tabs_item ul li .con-1 .tit { font-size: 16px; }
.sec5 .inner .tabs_item ul li { background: #ffffff; border: 1px solid #dddddd; box-sizing: border-box; padding: 30px; } .sec3 .inner .tabs_item ul li .con-2 p { font-size: 12px; }
.sec5 .inner .tabs_item ul li .con-1 .cla { padding: 5px 10px; } .sec3 .popularSwiper .swiper-pagination-fraction {top:28px;}
.sec5 .inner .tabs_item ul li .con-1 .tit { font-size: 16px; } .sec3 .popularSwiper .pagination {visibility:visible !important;}
.sec5 .inner .tabs_item ul li .con-2 p { font-size: 12px; }
.sec5 .popularSwiper .swiper-pagination-fraction {top:28px;} .sec4 { padding: 52px 0px 60px; }
.sec5 .popularSwiper .pagination {visibility:visible !important;} .sec4 .inner .more-btn {top:5px;right: 1%;}
.sec6 { padding: 52px 0px 60px; } .sec4 .inner .more-btn a {font-size:12px;padding:2px 10px 3px;}
.sec6 .inner .more-btn {top:5px;right: 1%;} .sec4 .inner .more-btn a span > span {display:none;}
.sec6 .inner .more-btn a {font-size:12px;padding:2px 10px 3px;} .sec4 .inner .more-btn a span img {width:22px;}
.sec6 .inner .more-btn a span > span {display:none;}
.sec6 .inner .more-btn a span img {width:22px;}
.popularSwiper .swiper-pagination { position: relative;top:10px; } .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 { background: #aaaaaa; border-radius: 30px; margin-right: 4px; opacity: unset !important; }
.popularSwiper .swiper-pagination-bullet-active { background: #376795; width: 35px; height: 10px; } .popularSwiper .swiper-pagination-bullet-active { background: #376795; width: 35px; height: 10px; }
.sec6 .onlineSwiper::before, .sec4 .onlineSwiper::before,
.sec6 .onlineSwiper::after { display: none; } .sec4 .onlineSwiper::after { display: none; }
.sec6 .onlineSwiper {padding:1% 20% 12%;width:60%;} .sec4 .onlineSwiper {padding:1% 20% 12%;width:60%;}
.sec6 .onlineSwiper .items .List .inner div.thumbnail {width:100%;} .sec4 .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); } .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); }
.sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box { } .sec4 .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%; } .sec4 .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; } .sec4 .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%;} .sec4 .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 .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; } .sec6 { padding: 54px 16px 60px; width: 100%; height: auto; box-sizing: border-box; }
.sec7 .inner { width: 100%; display: flex; flex-direction: column; } .sec6 .inner { width: 100%; display: flex; flex-direction: column; }
.sec7 .inner .Fl { float: none; width: 100%; margin: 0; } .sec6 .inner .Fl { float: none; width: 100%; margin: 0; }
.sec7 .inner .Fl.notice { margin-bottom: 24px; } .sec6 .inner .Fl.notice { margin-bottom: 24px; }
.sec7 .inner .Fl .ti { display: flex; align-items: center; justify-content: space-between; } .sec6 .inner .Fl .ti { display: flex; align-items: center; justify-content: space-between; }
.sec7 .inner .Fl .ti span { font-size: 18px; } .sec6 .inner .Fl .ti span { font-size: 18px; }
.sec7 .inner .Fl .ti a span { height: auto; } .sec6 .inner .Fl .ti a span { height: auto; }
.sec7 .inner .Fl .ti a span > span { display: none; } .sec6 .inner .Fl .ti a span > span { display: none; }
.sec7 .inner .Fl .ti a span img { width: 22px; margin: 0; } .sec6 .inner .Fl .ti a span img { width: 22px; margin: 0; }
.sec7 .inner .Fl .con { padding: 0 20px; border: 1px solid #dddddd; border-radius: 5px; } .sec6 .inner .Fl .con { padding: 0 20px; border: 1px solid #dddddd; border-radius: 5px; }
.sec7 .inner .Fl .con .list a { display: flex; } .sec6 .inner .Fl .con .list a { display: flex; }
.sec7 .inner .Fl .con .list .text { font-size: 16px; flex: 1;max-width: max-content; } .sec6 .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; } .sec6 .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; } .sec6 .inner .Fl .con .list .text p img { margin: 0;margin-left:5px; }
.sec7 .inner .Fl .con .list .answer { display: none; } .sec6 .inner .Fl .con .list .answer { display: none; }
.sec7 .inner .Fl .more {position:absolute;right:0%;top:5px;} .sec6 .inner .Fl .more {position:absolute;right:0%;top:5px;}
.sec7 .inner .Fl .more a span img {width:22px;} .sec6 .inner .Fl .more a span img {width:22px;}
.sec7 .inner .Fl .more a span > span {display:none;} .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 { width:100%;padding: 20px 0px 16px; position: relative; height: auto; box-sizing: border-box; }
footer .inner { width: 100%; 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 span:first-child { display: block; }
footer .copy br { display: none; } footer .copy br { display: none; }
.btn-go-top span:nth-of-type(2) { 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; } #mo-member-btn { display: block; }
.wrap footer {padding-bottom:100px;} .wrap footer {padding-bottom:100px;}
.wrap.sub footer {padding-bottom:16px;} .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-return::before { content: "반납예정일: "; }
.loan-data .inner .tabs_item .list-wrap .list-data div.list > div.n-use span {margin-right:10px;} .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) { /* 공통 */ @media all and (max-width: 479px) { /* 공통 */

BIN
src/main/webapp/images/icon/icon-arr-top2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB