2606_UIUX_25 수정 내역
https://contents.k-village.co.kr/front/mobile/css/layout.css
@@ -365,11 +365,12 @@ color: rgba(0, 0, 0, 1);} .popup-wrap .popup .popup__title--fit {padding-left: 0;} .popup-wrap .cont-wrap--fit {padding-top: 0;} .popup-wrap.full .cont-wrap--fit {padding-top: 0;} -.popup-wrap .popup .popup__content .popup__message {font-size:16px;line-height:25px;font-weight:400;} +.popup-wrap .popup .popup__content .popup__message {font-size:16px;line-height:25px;} .popup-wrap .popup .popup__content .popup__message--primary {font-size:18px;line-height:26px;} +.popup-wrap .popup .popup__content .popup__message--info {font-size:14px;line-height:normal;} .popup-wrap .popup .popup__content .popup__message ~ .popup__message {margin-top: 20px;} .popup-wrap .popup .popup__content .popup__message ~ .popup__message--desc {margin-top: 5px;} -.popup-wrap .popup .popup__content .popup__message .lined-text {position:relative;display:inline-block;font-size:inherit} +.popup-wrap .popup .popup__content .popup__message .lined-text {position:relative;display:inline-block;font-size:inherit;font-weight:inherit;} .popup-wrap .popup .popup__content .popup__message .lined-text::before {content:"";position: absolute;bottom:0;left:0;right:0;height: 1px;background-color: #000;} .quantity-control { font-size: 0; } @@ -784,7 +785,7 @@ touch-action: pan-y;} background-size:20px;} .quick-wrap.hide .quick-close{ transform: rotate(180deg);} -.top-btn{position: fixed; right: 21px; bottom: 90px; cursor: pointer; z-index: 16;text-align: right; display:flex; flex-direction:column-reverse; align-items:flex-end; transition:transform .3s;} +.top-btn{position: fixed; right: 21px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); cursor: pointer; z-index: 16;text-align: right; display:flex; flex-direction:column-reverse; align-items:flex-end; transition:transform .3s;} .top-btn.down{transform:translateY(60px)} .top-btn a{display:inline-block;width: 36px; height: 36px;margin:15px 0 0 0;} .top-btn [data-menuanchor="top"] {display:none; order:-1;} @@ -2023,7 +2024,6 @@ p.essen {font-size: 12px; margin: 8px 0} height: 1px; background: #000; } -.popup-wrap.change-address .popup header {border-bottom: 1px solid #ccc;} .popup-wrap.change-address .div-header h1 { font-size: 18px; font-weight: 500; @@ -2225,8 +2225,6 @@ p.essen {font-size: 12px; margin: 8px 0} } .popup-wrap.mypage-dis header {border-bottom: 1px solid #ccc;} -.popup-wrap.send-mail header {border-bottom: 1px solid #ccc;} -.popup-wrap.pw-change .popup__message--primary {margin-block: 10px 30px;} /* UIUX4차 68 기획전, 이벤트 타임세일 */ .event-bnr .bnr-txt.white strong
https://contents.k-village.co.kr/front/mobile/css/product.css
@@ -384,6 +384,7 @@ footer.direct button.full::before{transform:none} height: 100%; padding: 20px 20px 135px 20px; } +.basic-popup.size .cont-wrap--fit {padding-inline:0} .comment-pop.on .popup{max-height:100%;height:100%} .comment-pop .cont-wrap{overflow-y:auto;height:100%;padding:0 20px 126px 20px} .comment-pop .review-item{padding:0 20px 0 20px;border:none;margin:0 0 0 -20px} @@ -449,7 +450,7 @@ footer.direct button.full::before{transform:none} .text-info .list-menu li{border-bottom:1px solid #888} .text-info .list-menu li:first-child{border-top:1px solid #888} .basic-popup.filters .cont-wrap{overflow-y:auto;height:100%;padding:20px 20px 120px 20px} -.basic-popup.review-write .cont-wrap{overflow-y:auto;height:100%;padding:20px 20px 55px 20px;} +.basic-popup.review-write .cont-wrap{overflow-x:hidden;overflow-y:auto;height:100%;padding:20px 20px 55px 20px;} .fix-type2{position: fixed;bottom: 0;z-index: 10;width: 100%;} .popup-wrap .fix-type1,.popup-wrap .direct.fix-type1{position:fixed;bottom:-70px;width:100%;transition:all 0.3s;z-index:-1;height:0} .popup-wrap .fix-type2{height:0;z-index:1;} @@ -610,7 +611,7 @@ footer.direct button.full::before{transform:none} .reivew-step .type-06 + h4{border-top:1px solid #ddd;padding:30px 0 10px 0;} -.reivew-step{width:100%;padding: 0 20px;} +.reivew-step{width:100%;padding: 0 20px;box-sizing:border-box;} .review-write-tit{background:#f5f5f5;padding: 35px 20px 45px 20px;width: calc(100% + 40px);margin:-20px 0 -18px -20px} .review-write-tit p{font-size:13px;color:#888;} .review-step-nav{height:66px} @@ -626,7 +627,7 @@ margin: 0 0 10px 0;position: relative;z-index: 2;text-indent:-9999px;} .review-step-nav ul li.swiper-pagination-bullet-active span{border: 2px solid #ff5b37;color: #ff5b37;background:#fff;text-indent:0;line-height: 28px;font-size: 13px;font-weight: 600;} .review-step-nav ul li:nth-child(1).swiper-pagination-bullet-active:before{width: 20%;} .review-step-nav ul li:nth-child(2).swiper-pagination-bullet-active:before{width: 50%;} -.rv-swiper{width: calc(100% + 40px);margin: 0 0 0 -20px;} +.rv-swiper{width: calc(100% + 40px);margin: 0 0 0 -20px;overflow:hidden;} .reivew-step .filter-option h5 {font-size: 16px;padding: 16px 0 16px 0;text-align: center;} .reivew-step.rs2{margin:10px 0 0 0;} .reivew-step.rs3{margin:20px 0 0 0;} @@ -666,7 +667,7 @@ margin: 0 0 10px 0;position: relative;z-index: 2;text-indent:-9999px;} .inquire-item{padding:10px 0 15px 0} .inquire-item li{height:77px;padding:0 0 0 95px;position:relative;margin:5px 0 10px 0;font-size:13px;color:#888} .inquire-item .img-wrap{width:77px;height:77px;position:absolute;overflow:hidden;left:0;background:#f5f5f5;border:1px solid #ddd;text-align:center;line-height:69px} -.inquire-item .img-wrap img{width:100%} +.inquire-item .img-wrap img{width:100%;height: 100%;object-fit: contain;} .inquire-item .img-wrap.bin img{width:auto} .inquire-item p{} .inquire-item p strong{display:block;color:#555;font-size:11px;padding:3px 0 3px 0} @@ -679,6 +680,7 @@ margin: 0 0 10px 0;position: relative;z-index: 2;text-indent:-9999px;} .info-inquire{border:1px solid #ddd;padding:15px 15px;margin:10px 0} .info-inquire strong{color:#000} .inquire-attach{padding:0 0 30px 0} +.inquire-attach--fit {padding:0} .inquire-attach h4{font-size:15px;padding:15px 0 7px 0;font-weight:500} .inquire-attach .add-file {display:block;} .inquire-attach .add-file ul{display:inline-block;vertical-align: top;} @@ -687,7 +689,7 @@ margin: 0 0 10px 0;position: relative;z-index: 2;text-indent:-9999px;} .inquire-attach .add-file li{position:relative;margin:0 4px 6px 0;display:inline-block;} .inquire-attach .add-file li img{width:77px;height:77px;object-fit:cover} .inquire-attach .add-file li video{width:77px;height:77px;object-fit:cover} -.inquire-attach .add-file li .del{display:block;width:16px;height:16px;position:absolute;right:0;top:0;background:#000 url(https://contents.k-village.co.kr/front/pc/images/common/remove-white_new.svg) center center no-repeat;text-indent:-9999px;background-size:12px} +.inquire-attach .add-file li .del{display:block;width:16px;height:16px;position:absolute;right:0;top:0;background: url(https://contents.k-village.co.kr/front/pc/images/common/remove-white_new.svg) center center no-repeat;text-indent:-9999px;background-size:12px} .answer .inquire-attach{padding: 20px 0 0 20px;} .attach-btns{padding:0 0 10px 0} .attach-btns li{padding:0 0 10px 0}
html/PD-012_goods_detail.html
@@ -13267,8 +13267,8 @@ $(document).ready(() => { <div class="basic-popup popup-wrap inquire"> <div class="popup"> <div class="layer-container"> - <header class="flex"> - <h4 id="ask-title">상품 문의하기</h4> + <header class="popup__header flex"> + <h1 class="popup__title popup__title--fit" id="ask-title">상품 문의하기</h1> <div class="flex end margin"> <button class="close"> <div class="box"> @@ -13300,11 +13300,11 @@ $(document).ready(() => { <span class="txt-byte ask"><em>0</em> / 1,000</span> </div> </div> - <p class="form-info">작성 시 주민등록번호, 휴대폰번호, 주소 등 상세 개인정보가 문의내용에 저장되지 않도록 주의해 주시기 바랍니다.</p> <div class="flex info-inquire type1"> <ul> + <li>작성 시 주민등록번호, 휴대폰번호, 주소 등 상세 개인정보가 문의내용에 저장되지 않도록 주의해 주시기 바랍니다.</li> <li>배송, 교환, 반품 등의 문의사항은 <strong>고객센터 > 1:1문의</strong>를 이용해 주세요.</li> - <li>답글작성시 알림톡/문자로 알려드립니다.</li> + <li>답글 작성시 알림톡/문자로 알려드립니다.</li> </ul> </div> <div class="inquire-attach"> @@ -13314,7 +13314,7 @@ $(document).ready(() => { <li>동영상 : 50MB 이하의 확장자 WMV, AVI, MPG, MOV, MP4 파일</li> <li>최대 4개 까지 첨부 가능</li> </ul> - <div class="add-file flex"> + <div class="add-file flex mt-10"> <ul id="ask-photo-base"> <!-- <li> <img src="/mobile/images/temp/rectangle-copy-3@2x.png" alt=""> @@ -13329,14 +13329,7 @@ $(document).ready(() => { <footer class="direct fix-type1"> <div class="flex full"> <div class="flex"> - <button class="btn-type-gray bright large"> - <div class="box"> - <span>취소</span> - </div> - </button> - </div> - <div class="flex"> - <button class="btn-type-gray-s large" id="ask-save-btn"> + <button class="btn-type-gray-s full large" id="ask-save-btn"> <div class="box"> <span id="ask-btn-text">문의작성</span> </div> @@ -13543,14 +13536,7 @@ $(document).ready(() => { <footer class="direct fix-type1"> <div class="flex full"> <div class="flex"> - <button class="btn-type-gray bright large ask-atmt-cancel-btn"> - <div class="box"> - <span>취소</span> - </div> - </button> - </div> - <div class="flex"> - <button class="btn-type-normal large ask-atmt-save-btn"> + <button class="btn-type-normal full large ask-atmt-save-btn"> <div class="box"> <span>첨부완료</span> </div>