From 1d13ca5dbe32291ce6889b68e9a73631b0bd0f81 Mon Sep 17 00:00:00 2001 From: com02 Date: Thu, 16 Dec 2021 17:14:44 +0900 Subject: [PATCH] css --- src/main/webapp/css/default.css | 18 ++++++++++-------- src/main/webapp/css/media.css | 30 +++++++++++++++++------------- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/main/webapp/css/default.css b/src/main/webapp/css/default.css index cf630f0a..80ee3df5 100644 --- a/src/main/webapp/css/default.css +++ b/src/main/webapp/css/default.css @@ -237,7 +237,7 @@ transform: rotate(45deg); .sec3 .pickSwiper .loop-count button.remote-pick:focus {outline:none;} .sec3 .pickSwiper .loop-count button.remote-pick.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');} .sec3 .pickSwiper .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);} -.sec3 .pickSwiper .swiper-pagination-fraction {color:#333;left:-12px;top:4px;width:auto;} +.sec3 .pickSwiper .swiper-pagination-fraction {color:#333;left:-12px;top:4px;width:auto;display:none;} /********** 메인섹션4 **********/ .sec4 .inner .middle-banner {background: url(/images/bg/bg-sec4-bg.jpg) no-repeat;width:100%;height:317px;background-size: cover;} @@ -292,9 +292,11 @@ transition: all 0.2s ease-in-out; .sec6 .inner .more-btn {position:absolute;right: calc(50% - 690px);top:30px;} .sec6 .inner .more-btn a {} .sec6 .inner .more-btn a span > span {margin-right:5px;} -.sec6 .onlineSwiper {padding:1% 0px 4%;} +.sec6 .onlineSwiper {padding:1% 0px 4%;margin:0% 2%;} +/* .sec6 .onlineSwiper::before {content: '';width:4%;height:120%;background: #fff;display: inline-block;position: absolute;left:0px;top:-10%;z-index: 9;box-shadow:30px 0px 30px rgba(255,255,255,1.0);} .sec6 .onlineSwiper::after {content: '';width:4%;height:120%;background: #fff;display: inline-block;position: absolute;right:0px;top:-10%;z-index: 9;box-shadow:-30px 0px 30px rgba(255,255,255,1.0);} +*/ .sec6 .onlineSwiper .swiper-slide {height:auto;border-radius:10px;/*background: #ccc;box-shadow:1px 1px 5px rgba(0,0,0,0.3);*/} .sec6 .onlineSwiper .items.cover {} .sec6 .onlineSwiper .items.cover:after {clear:both;content:'';display:block;} @@ -329,15 +331,15 @@ transition: all 0.2s ease-in-out; .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS {float:left;width:35%;} .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .view a {background: #376795;color:#fff;display: block;border-radius: 3px;padding:8px 0px;font-size: 14px;} .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS a {background: #666;color:#fff;display: block;border-radius: 3px;padding:8px 0px;font-size: 14px;} -.sec6 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:30px;top:45%;} -.sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:30px;top:45%;} +.sec6 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:30px;top:45%;background: rgba(255,255,255,0.6);border-radius: 3px;box-shadow:1px 1px 3px rgba(0,0,0,0.5);} +.sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:30px;top:45%;background: rgba(255,255,255,0.6);border-radius: 3px;box-shadow:1px 1px 3px rgba(0,0,0,0.5);} .sec6 .onlineSwiper .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .sec6 .onlineSwiper .loop-count button.remote-online {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;} .sec6 .onlineSwiper .loop-count button.remote-online span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;} .sec6 .onlineSwiper .loop-count button.remote-online:focus {outline:none;} .sec6 .onlineSwiper .loop-count button.remote-online.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');} .sec6 .onlineSwiper .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);} -.sec6 .onlineSwiper .swiper-pagination-fraction {color:#333;left:-12px;top:4px;width:auto;} +.sec6 .onlineSwiper .swiper-pagination-fraction {color:#333;left:-12px;top:4px;width:auto;display:none;} /********** 메인섹션7 **********/ .sec7 {background:#f5f5f5;padding:100px 0px 100px;display: inline-block;width:100%;height:auto;} @@ -946,7 +948,7 @@ transform: rotate(45deg);} .data.detail .inner .row-top .center .title-box .btn-info button.view {width:auto;padding:0px 26px;} .data.detail .inner .row-top .center .title-box .btn-info button.ris {} .data.detail .inner .row-top .center .title-box .btn-info button.favorit {text-indent: -99999px;background:url(/images/icon/icon-data-star.png) no-repeat center #f5f5f5;} -/*.data.detail .inner .row-top .center .right .con-1 button.favorit.on {background:url(/images/icon/icon-data-star-on.png) no-repeat center #f5f5f5;}*/ +.data.detail .inner .row-top .center .title-box .btn-info button.favorit.on {background:url(/images/icon/icon-data-star-on.png) no-repeat center #f5f5f5;} .data.detail .inner .row-top .center .title-box .btn-info button.share {text-indent: -99999px;background:url(/images/icon/icon-data-share.png) no-repeat center #f5f5f5;} .data.detail .inner .row-top .center .title-box .btn-info button.original {width:200px;display:none;} @@ -1009,7 +1011,7 @@ text-overflow: ellipsis;} .data.detail .inner .row-bottom .DetailSwiper1 .loop-count button.remote-detail1 {outline:none;} .data.detail .inner .row-bottom .DetailSwiper1 .loop-count button.remote-detail1.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');} .data.detail .inner .row-bottom .DetailSwiper1 .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);} -.data.detail .inner .row-bottom .DetailSwiper1 .swiper-pagination-fraction {color:#333;left:-12px;top:4px;width:auto;} +.data.detail .inner .row-bottom .DetailSwiper1 .swiper-pagination-fraction {color:#333;left:-12px;top:4px;width:auto;display:none;} .data.detail .inner .row-bottom .con-4 {background: #f5f5f5;padding:0px 0px 60px;margin:0px 0px 100px;} .data.detail .inner .row-bottom .con-4 .top {padding:40px 0px;position: relative;text-align: center;} @@ -1066,7 +1068,7 @@ text-overflow: ellipsis;} .data.detail .inner .row-bottom .DetailSwiper2 .loop-count button.remote-detail2 {outline:none;} .data.detail .inner .row-bottom .DetailSwiper2 .loop-count button.remote-detail2.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');} .data.detail .inner .row-bottom .DetailSwiper2 .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);} -.data.detail .inner .row-bottom .DetailSwiper2 .swiper-pagination-fraction {color:#333;left:-12px;top:4px;width:auto;} +.data.detail .inner .row-bottom .DetailSwiper2 .swiper-pagination-fraction {color:#333;left:-12px;top:4px;width:auto;display:none;} .data.detail .btn-box {margin:50px 0px;text-align: center;} .data.detail .inner .row-bottom .DetailSwiper1 .swiper-button-next, diff --git a/src/main/webapp/css/media.css b/src/main/webapp/css/media.css index 2a8e7664..872c3117 100644 --- a/src/main/webapp/css/media.css +++ b/src/main/webapp/css/media.css @@ -245,12 +245,15 @@ footer .family_site {right:10px;} .privacy .top-bg p:nth-child(1) {margin:300px 5% 20px;font-size:16px;color:#333;} .privacy .top-bg p:nth-child(2) {margin:0 5%;font-size:12px;color:#333;} - .data.detail .inner .row-bottom .DetailSwiper2 .swiper-slide { height: auto;background:none;box-shadow:0 0 0; } - .visit-data .inner .tabs_item .list-wrap .list-data div.list > div {font-size:14px;} - .interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-cultural {width:20%;} +.data.detail .inner .row-bottom .DetailSwiper2 .swiper-slide { height: auto;background:none;box-shadow:0 0 0; } +.visit-data .inner .tabs_item .list-wrap .list-data div.list > div {font-size:14px;} +.interested-data .inner .data-box .list-data-wrap .list-data div.list > div.t-cultural {width:20%;} - .wrap .nav-wrap #primary-nav {display:none !important;opacity:0 !important;} - .data.detail .inner .row-top .center .title-box .tit-info {width:70%;} +.wrap .nav-wrap #primary-nav {display:none !important;opacity:0 !important;} +.data.detail .inner .row-top .center .title-box .tit-info {width:70%;} +.sec5 .popularSwiper .pagination {visibility:visible !important;} +.sec6 .swiper-button-next, .swiper-rtl .swiper-button-prev {visibility:visible !important;} +.sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {visibility:visible !important;} } /* 모바일 가로, 테블릿 세로 (해상도 ~ 768px)*/ @@ -342,6 +345,7 @@ footer .family_site {right: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;} @@ -786,14 +790,14 @@ footer .family_site {right:10px;} .data.detail .btn-box { padding: 0 16px; } .data.detail .btn-box .btn { width: 100%; } -.data.detail .inner .row-top .center .right .con-2 .de-data ul li.detail-accordion > span { float: left; } -.data.detail .inner .row-top .center .right .con-2 .de-data ul li.detail-accordion .desc-wrap { display: flex; } -.data.detail .inner .row-top .center .right .con-2 .de-data ul li.detail-accordion .desc-wrap .desc { position: relative; flex: 1; height: 20px; word-break: unset; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #fff; line-height: 24px; } -.data.detail .inner .row-top .center .right .con-2 .de-data ul li.detail-accordion button { width: 64px; height: 28px; margin-left: 10px; background: #3e414a; border-radius: 30px; font-size: 12px; line-height: 18px; color: #ffffff; margin-top: -4px; } -.data.detail .inner .row-top .center .right .con-2 .de-data ul li.detail-accordion .btn-hide { display: none; background: #909090; position: absolute; bottom: 0; right: 0; } -.data.detail .inner .row-top .center .right .con-2 .de-data ul li.detail-accordion.show .desc-wrap .desc { width: 100%; height: auto; word-break: break-all; padding-bottom: 30px; } -.data.detail .inner .row-top .center .right .con-2 .de-data ul li.detail-accordion.show .desc-wrap .btn-more { display: none; } -.data.detail .inner .row-top .center .right .con-2 .de-data ul li.detail-accordion.show .btn-hide { display: block; } +.data.detail .inner .row-top .center .right .de-data ul li.detail-accordion > span { float: left; } +.data.detail .inner .row-top .center .right .de-data ul li.detail-accordion .desc-wrap { display: flex; } +.data.detail .inner .row-top .center .right .de-data ul li.detail-accordion .desc-wrap .desc { position: relative; flex: 1; height: 20px; word-break: unset; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #fff; line-height: 24px; } +.data.detail .inner .row-top .center .right .de-data ul li.detail-accordion button { width: 64px; height: 28px; margin-left: 10px; background: #3e414a; border-radius: 30px; font-size: 12px; line-height: 18px; color: #ffffff; margin-top: -4px; } +.data.detail .inner .row-top .center .right .de-data ul li.detail-accordion .btn-hide { display: none; background: #909090; position: absolute; bottom: 0; right: 0; } +.data.detail .inner .row-top .center .right .de-data ul li.detail-accordion.show .desc-wrap .desc { width: 100%; height: auto; word-break: break-all; padding-bottom: 30px; } +.data.detail .inner .row-top .center .right .de-data ul li.detail-accordion.show .desc-wrap .btn-more { display: none; } +.data.detail .inner .row-top .center .right .de-data ul li.detail-accordion.show .btn-hide { display: block; } /* 공지사항 */ .list-header .list-search { position: relative; margin-bottom: 42px; }