퍼블 최신화

src/main/webapp/ux/mo/css/common_m.css

@@ -301,7 +301,7 @@ input[type="file"] {
   overflow: hidden; clip:rect(0,0,0,0); border: 0;
 }
 .fileAdd{
-  width: 72px;height:72px;border: 0.1rem solid #dddddd;float: left;font-size: 0;
+  width: 7.2rem;height:7.2rem;border: 0.1rem solid #dddddd;float: left;font-size: 0;
   background: url('/images/mo/ico_btn_file.png') no-repeat;background-position: 50% 50%;
   -webkit-appearance: none; -moz-appearance: none; appearance: none;cursor: pointer; background-size:30px;
 }
@@ -310,11 +310,11 @@ input[type="file"] {
   float: right; -webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: pointer;
 }
 .pics {
-  display: inline !important;float: left;margin: 0 10px 0 0;width: 72px;height:72px;
+  display: inline !important;float: left;margin: 0 10px 0 0;width: 7.2rem;height:7.2rem;
   border: 1px solid #dddddd;box-sizing: border-box;position: relative; overflow: hidden;
 }
 .picsThumbs {
-  width: auto;height: auto;max-height: 71px;max-width: 71px;margin: auto 0;
+  width: auto;height: auto;max-height: 7.1rem;max-width:7.1rem;margin: auto 0;
   position: absolute;top: 50%;bottom: auto;left: 50%;right: 0;
   transform: translate(-50%, -50%);cursor: pointer;
 }

src/main/webapp/ux/mo/css/layout_m.css

@@ -411,7 +411,7 @@
 /* pd_detail */
 .pd .pd_detail {}
 .pd .pd_detail .pd_info{ position: relative;z-index: 0;}
-.pd .pd_detail .pd_info:before {content: "";display: block;width: 100%;height: 150vw;}
+.pd .pd_detail .pd_info:before {content: "";display: block;width: 100%;height: 142vw;}
 .pd .pd_detail .pd_info .pd_info1{position: absolute;position: fixed;top: 0;left: 0;right: 0;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}
 .pd .pd_detail .inner{background: #ffffff;}
 .pd_detail .pd_info > .inner:after, .pd_detail > .inner:after{content: '';width: 100%;height: 1.2rem;padding: 0;background: #f5f5f5;position: absolute;bottom: -1.2rem;left: 0;right: auto;}
@@ -470,7 +470,7 @@
 .pd_detail .timer_box::before{position: absolute;left: 0;bottom: 0;width: 100%;height: 3rem;background-color: rgba(255,255,255,.95);z-index: -1;} /* content: ''; */
 .pd_detail .timer_box p{padding: 0;text-align: center;background: #222;height: 3.6rem;}
 /* .pd_detail .timer_box::after{content:''; position:absolute; right:-1.2rem; bottom:-1.8rem; border:1.2rem solid transparent; border-top:1.2rem solid #fff; transform:rotate(-45deg);} */
-.pd_detail .timer_box::after{content:''; position: absolute;right: 0;bottom: 0;display: block;width: 0px;border: 0.5rem solid transparent;border-bottom-color: #fff;border-right-color: #fff;}
+/*.pd_detail .timer_box::after{content:''; position: absolute;right: 0;bottom: 0;display: block;width: 0px;border: 0.5rem solid transparent;border-bottom-color: #fff;border-right-color: #fff;}*/
 .pd_detail .timer_box p::after {content:''; clear:both; display:block;}
 .pd_detail .timer_box p span {display:inline-block; position:relative; }
 .pd_detail .timer_box p .tt {position:relative; padding-left:2.8rem; color:#fff; font-size:1.3rem; line-height: 3.8rem;}
@@ -486,8 +486,8 @@
 .pd_detail .option_box .opt_color ul::after {content:''; position: relative; display:inline-block; width:2rem; height:1px;}
 .pd_detail .option_box .opt_color ul li {margin-right:0.5rem; display:inline-block; width:5rem;}
 .pd_detail .option_box .opt_color ul li:last-child {margin-right:0;}
-.pd_detail .option_box .opt_color ul li a {position:relative; display:block; padding-bottom:150%; box-sizing:border-box; width:5rem;}
-.pd_detail .option_box .opt_color ul li a img {position:absolute; top:50%; left:50%; width:100%; transform: translate(-50%, -50%);}
+.pd_detail .option_box .opt_color ul li a {position:relative; display:block; padding-bottom:0%; box-sizing:border-box; width:5rem;}
+.pd_detail .option_box .opt_color ul li a img {width:100%; }
 .pd_detail .option_box .opt_color ul li a.on:after{display:block; content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px solid #fd4802; box-sizing:border-box;}
 .pd_detail .option_box > [class^="opt_"] .opt_header {margin-bottom:0.5rem;}
 .pd_detail .option_box > [class^="opt_"] .opt_header .title {margin-right:1rem; font-weight:500; color:#222;}
@@ -648,7 +648,7 @@
 .riview_box .ex_review .star_score .star {display:inline-block; position:relative; width:9.5rem; height:1.4rem; background:#ddd;}
 .riview_box .ex_review .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.4rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
 .riview_box .ex_review .star_score .star .progbar {display:inline-block;vertical-align: top; height:1.4rem; background:#fd4802}
-.riview_box .ex_review .star_score .score {color:#222; font-size:1.4rem; font-weight:500;}
+.riview_box .ex_review .star_score .score {color:#222; font-size:1.4rem; font-weight:300;}
 .riview_box .best_review {margin-bottom:1.4rem; text-align:left;}
 .riview_box .best_review a {display:block; position:relative; padding:2rem; border:1px solid #eee;}
 .riview_box .best_review a .star_score .star {display:inline-block; position:relative; width:9.3rem; height:1.4rem; background:#ddd;}
@@ -833,7 +833,9 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .dp .mid_banner{margin-top:-6rem}
 /* 210419 */
 .pd_qnalist_pop .ui_foot{padding:0 2rem}
+.pd_qnalist .ui_foot{padding:0 2rem}
 .pd_qnalist_pop .ui_foot .btn{width:100%; height:4rem;}
+.pd_qnalist .ui_foot .btn{width:100%; height:4rem;}
 .dp .Bulletship_body{padding:0 2rem;}
 .dp .Bulletship_foot{padding:0 2rem;}
 /* 210420 */
@@ -936,6 +938,23 @@ header .subs .dp_list_btn_gnbs.on span i {transform: rotate(-180deg);-webkit-tra
 .dp .dp_listItems_wrap{padding-bottom:3rem;}
 .dp .other_promotion_slide{padding-top:0}
 .dp .dp_lookbook ~ .popup_box.nodata .popup_con{margin-bottom:0;}
+/* 210512 */
+.pd_qnalist .fold_head::after{transform: translateY(60%);}
+.pd_qnalist_pop .fold_head::after{transform: translateY(90%);}
+.cs_contactUs_1 .fold_head::after{transform: translateY(120%);}
+.pd_detail .riview_box [class^="ex_"] > a .tit {color:#222; font-size:1.4rem; font-weight:300;}
+.pd_detail .riview_box [class^="ex_"] > a .tit em.number {margin-left:0.4rem; color:#666; font-weight:200;}
+.dp .dp_detail_visual .fileAdd{margin-right:1rem}
+.dp .dp_detail_visual .pics{margin-bottom:1rem}
+/*.dp .dp_detail_visual .pics:nth-of-type(4){margin-right:0;}
+.dp .dp_detail_visual .pics:nth-of-type(8){margin-right:0;}*/
+/*.dp .dp_detail_visual .cmt_wrap .cmt_thumb .imgUpload{margin:0}*/
+.my .review .fileAdd{margin-right:1rem}
+.my .review .pics{margin-bottom:1rem}
+/*.my .review .pics:nth-of-type(4){margin-right:0;}
+.my .review .pics:nth-of-type(8){margin-right:0;}*/
+/*.my .review .cmt_wrap .cmt_thumb .imgUpload{margin:0}*/
+
 
 
 
@@ -1217,17 +1236,18 @@ header .subs .dp_list_btn_gnbs.on span i {transform: rotate(-180deg);-webkit-tra
 .pd_qnalist .qna_list .form_field input[type="checkbox"] + label:before,
 .pd_qnalist .qna_list .form_field input[type="checkbox"] + label:after {top:50%; transform:translateY(-50%); margin-top:0;}
 .pd_qnalist .qna_list .foldGroup .fold_head a{padding: 1.4rem 3rem; border-bottom:0.1rem solid #E5E5E5;}
+.pd_qnalist .pd_qnalist .qna_list .foldGroup .fold_head a{padding: 1.4rem 1.6rem; border-bottom:0.1rem solid #E5E5E5;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico {display:inline-block; width:auto; height:auto; vertical-align:middle;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_myqna::after {content:'내문의'; display:inline-block; margin-right:1rem; color:#fd4802; font-size:1.1rem; text-align:center; box-sizing:border-box; line-height:20px;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_secret::after {content:''; display:inline-block; margin-right:1rem; width:1.2rem; height:1.2rem; background:url('/images/mo/ico_secret.png') no-repeat 50% 50%; background-size:contain;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit span{vertical-align:middle;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .lap2 span{display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;max-height: 2.3rem;overflow: hidden;white-space: normal;overflow-wrap: break-word;}
-.pd_qnalist .qna_list .foldGroup .fold_head.on .fold_tit .lap2 span{display: inline-block;max-height: 100%;overflow: auto;}
+/*.pd_qnalist .qna_list .foldGroup .fold_head.on .fold_tit .lap2 span{display: inline-block;max-height: 100%;overflow: auto;}*/
 .pd_qnalist .qna_list .foldGroup .my_qna .fold_head {background-color:#fff6f2;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_state{font-size:1.1rem;}
 .pd_qnalist .qna_list .foldGroup > ul > li:first-child {border-top: 1px solid #e5e5e5;}
 .pd_qnalist .qna_list .check_secret{padding: 0 1.33rem; margin-bottom:1.5rem;}
-.pd_qnalist .qna_list .nodata {padding:20rem 0 17rem; text-align:center;}
+.pd_qnalist .qna_list .nodata {padding:14rem 0 17rem; text-align:center;}
 .pd_qnalist .qna_list .nodata .txt_box {color:#666; font-size:1.3rem; font-weight:300; color:#888;}
 .pd_qnalist .info_txt{padding:0 1.33rem; margin-top:3rem;}
 .pd_qnalist .info_txt::after {content:''; clear:both; display:block;}

src/main/webapp/ux/mo/css/style24_m.css

@@ -649,21 +649,22 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 .cmt_wrap {background: #f5f5f5;}
 .cmt_wrap .cmt_write {background: #fff;}
 .cmt_wrap .cmt_group {background: #fff;}
-.cmt_wrap .input_wrap {width: 100%;}
-.cmt_wrap .comment_textarea {padding:0 2rem;}
+/* .cmt_wrap .input_wrap {width: 100%;} */
+.cmt_wrap .cmt_tarea {padding:0 2rem;}
+.cmt_wrap .comment_textarea .input_wrap{display: block;}
 .cmt_wrap .cmt_thumb {padding:0 2rem;}
 .cmt_wrap .cmt_thumb .imgUpload {margin:0 -1%;}
 .cmt_wrap .doc_contactus {width: 100%; height: 15rem; padding: 1.5rem; margin:3rem 0 1rem;}
 .cmt_wrap .doc_ans {width: 100%; height: 15rem; padding: 20px; font-size: 1.3rem; line-height: 1.6; color: #888; font-weight: 300; resize:none;}
 .cmt_wrap .txt_cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; margin-top: 0;}
 .cmt_wrap .txt_cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; margin-top: 0; color: #888;}
-.cmt_wrap .form_field {display: block; margin:0 -1% 0;}
+/* .cmt_wrap .form_field {display: block; margin:0 -1% 0;} */
 .cmt_wrap .form_field .img_file {margin:0 -0.4rem 0;}
 .cmt_wrap .form_field .img_file .imgUpload:after {content:''; clear:both; display: block;}
-.cmt_wrap .pics {overflow:hidden; /*width: calc((100% - 3.2rem) /4);*/ width: 23%; margin:1%; height:auto; padding-top: 23%; border:none; background: #f5f5f5;}
+/* .cmt_wrap .pics {overflow:hidden; width: 23%; margin:1%; height:auto; padding-top: 23%; border:none; background: #f5f5f5;} */
 .cmt_wrap .picsThumbs {max-width:100%; max-height:none; width: 100%; height:auto;}
 /* .ev .comment .imgUpload {width: 100%; height:100%;} */
-.cmt_wrap .fileAdd {float:left; width: 23%; height:auto; padding-top: 23%; margin:1%;}
+/* .cmt_wrap .fileAdd {float:left; width: 23%; height:auto; padding-top: 23%; margin:1%;} */
 .cmt_wrap .btn_wrap {padding:2rem 2rem 3rem;}
 .cmt_wrap .btn_wrap button.btn {width: 100%; padding:1.1rem 0; font-size: 1.4rem; font-weight: 500; height:4.5rem;}
 .cmt_wrap .nodata {padding:14rem 0; font-size: 1.3rem; color: #888; text-align: center;}
@@ -937,6 +938,14 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 .goods_btn_wrap > div > .btn {display:block; width:100%; height:100%; border:1px solid #a7a7a7; font-size: 1.2rem; padding:1rem 1.3rem; font-weight: 500;}
 .goods_btn_wrap > div > .btn.btn_primary {background-color:#fff; border-color:#fd4802; color: #fd4802;}
 
+.goods_btn_wrap.type1 {font-size: 0;}
+.goods_btn_wrap.type1 > div {width: 50%; margin:0; display: inline-block; flex:none;}
+.goods_btn_wrap.type1 > div:first-child {padding-right: 0.4rem; padding-bottom: 0.4rem;}
+.goods_btn_wrap.type1 > div:nth-child(2) {padding-left: 0.4rem; padding-bottom: 0.4rem;}
+.goods_btn_wrap.type1 > div:nth-child(3) {padding-right: 0.4rem; padding-top: 0.4rem;}
+.goods_btn_wrap.type1 > div:nth-child(4) {padding-left: 0.4rem; padding-top: 0.4rem;}
+.goods_btn_wrap.type1 > div > .btn {font-size: 1.4rem;}
+
 /* my_main */
 /* main.container.my .inner:last-child {padding-bottom: 0;} */
 .my .lnb_list {margin-top: 1.2rem;}
@@ -1005,7 +1014,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 .my .part_goods .goods_alert p {display: inline-block; text-align: left; font-size: 1.1rem; font-weight: 200; color: #fd4802; padding-left: 2rem; background: url(/images/mo/ico_err02.png) no-repeat left top; background-size: 1.5rem;}
 
 .part_goods .goods_detail {position: relative; padding:0 0 0 11rem;}
-.part_goods .goods_detail .thumb_box {width:9rem; height:13.5rem; position: absolute; left: 0; top: 0;}
+.part_goods .goods_detail .thumb_box {background: #f5f5f5; width:9rem; height:13.5rem; position: absolute; left: 0; top: 0;}
 .part_goods .goods_detail .thumb_box a {display:block; background:#f5f5f5;}
 
 .part_goods .goods_detail .info_box {min-height:13.5rem; padding-top: 1rem;}

src/main/webapp/ux/mo/js/common_m.js

@@ -148,20 +148,49 @@ $(document).ready(function() {
             $("#fileAdd").on("change", function(e) {
                 var files = e.target.files,
                     filesLength = files.length;
+                    console.log(filesLength);
+                var cmtLa = $('.form_field .imgUpload label');
+                var cmtIn = $('.form_field .imgUpload input');
+                var myrvLa = $('.form_field .imgUpload label');
+                var myrvIn = $('.form_field .imgUpload input');
                 for (var i = 0; i < filesLength; i++) {
                     var f = files[i]
                     var fileReader = new FileReader();
                     fileReader.onload = (function(e) {
                         var file = e.target;
+                        console.log(file);
                         $("<span class=\"pics\">" +
                             "<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
-                            "<span class=\"removes\">Removes image</span>" +
-                            "</span>").insertBefore("#fileAdd");
+                            "<br/><span class=\"removes\">Removes image</span>" +
+                            "</span>").insertBefore(".fileAdd");
                         $(".removes").click(function(){
+                            $(this).parent(".pics").closest(".imgUpload").children("input").val("");
                             $(this).parent(".pics").remove();
+                            cmtLa.css('display', 'block');
+                            cmtIn.css('display', 'block');
+                            myrvLa.css('display', 'block');
+                            myrvIn.css('display', 'block');
+                            $('#fileAdd').removeAttr("disabled");
                         });
                     });
                 fileReader.readAsDataURL(f);
+                    var maxFileLength = 10; /* 최대 파일 갯수를 입력해 주세요 */
+                    var imgFiles=$('.imgUpload .pics');
+                    var cmtLa = $('.form_field .imgUpload label');
+                    var cmtIn = $('.form_field .imgUpload input');
+                    var myrvLa = $('.form_field .imgUpload label');
+                    var myrvIn = $('.form_field .imgUpload input');
+                    console.log(imgFiles.length)
+                    if (imgFiles.length >= maxFileLength-1) {
+                        //mcxDialog.alert('이미지는 최대' + maxFileLength +'장 까지 첨부 가능합니다.'); //210507_삭제
+                        $('#fileAdd').attr("disabled",true);
+                        cmtLa.css('display', 'none');
+                        cmtIn.css('display', 'none');
+                        myrvLa.css('display', 'none');
+                        myrvIn.css('display', 'none');
+                    } else if(imgFiles.length < maxFileLength){
+                        $('#fileAdd').removeAttr("disabled");
+                    }
                 }
             });
         } else {

src/main/webapp/ux/pc/css/layout.css

@@ -1657,11 +1657,11 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	/* 정렬타입 [ cutcut1 ~ 4 ] 추가 */
 	.dp .itemsGrp.cut1 {margin:0 -10px;display: flex;justify-content: center;flex-direction: column;flex-wrap: nowrap;align-content: center;align-items: center;}
 	.dp .itemsGrp.cut1 .item_prod {display: block;}
-	.dp .itemsGrp.cut2 {margin:0 -10px;margin: 0 auto;display: inline-block;padding: 0 calc((57% - 20px)/2);}
+	.dp .itemsGrp.cut2 {margin:0 -10px;margin: 0 auto;display: inline-block;padding: 0 calc((58% - 20px)/2);}
 	.dp .itemsGrp.cut2 .item_prod {width: calc((100% - 0px)/2);}
-	.dp .itemsGrp.cut3 {margin:0 -10px;margin: 0 auto;display: inline-block;padding: 0 calc((36.8% - 20px)/2);}
+	.dp .itemsGrp.cut3 {margin:0 -10px;margin: 0 auto;display: inline-block;padding: 0 calc((42.8% - 20px)/2);}
 	.dp .itemsGrp.cut3 .item_prod {width: calc((100% - 0px)/3);}
-	.dp .itemsGrp.cut4 {margin:0 -10px;margin: 0 auto;display: inline-block;padding: 0 calc((15.8% - 20px)/2);}
+	.dp .itemsGrp.cut4 {margin:0 -10px;margin: 0 auto;display: inline-block;padding: 0 calc((28.8% - 20px)/2);}
 	.dp .itemsGrp.cut4 .item_prod {width: calc((100% - 0px)/4);}
 	.dp .wrap {padding-bottom:160px;}
 	.dp .cont_body {position:relative;}

src/main/webapp/ux/pc/js/common-ui.js

@@ -454,6 +454,7 @@ $(document).ready( function() {
 
 	/* 상품리스트 sticky_nav_header */
 	$(function(){
+		/* 210512_수정 : 스크롤시 해당 상품영역 sticky_nav 구분자 active 클래스추가 수정 */
 		/* 스크롤시 효과 */
 		$(window).scroll(function(){
 
@@ -477,21 +478,22 @@ $(document).ready( function() {
 				$(".sticky_nav").removeClass("sticky");
 			}
 
-			$(".list_content > div").each(function(i){
-				var obj = {};
-				obj.KEY = i;
-				obj.VALUE = $(this).offset().top;
-				arr.push(obj);
-			});
-
 			$('.sticky_nav li').find('a').removeClass('active');
 
-			$.each(arr, function(index, item) {
-				if(windScroll < item.VALUE) {
-					$('.sticky_nav li').eq(item.KEY).find('a').addClass('active');
-					return false;
+			var $menu     = $('.sticky_nav li a'),
+				$contents = $(".list_content > div");
+
+			$.each($contents, function(idx, item){
+				var $target   = $(".list_content > div").eq(idx),
+					i         = $target.index(),
+					targetHeader = $(".sticky_nav").outerHeight() + 30,
+					targetTop = $target.offset().top - targetHeader;
+				if (targetTop < windScroll) {
+					$menu.removeClass('active');
+					$menu.eq(idx).addClass('active');
 				}
-			});
+			})
+
 		});
 
 		/* 상품리스트 sticky_nav_link */
@@ -502,8 +504,8 @@ $(document).ready( function() {
 			var hookPot = $(hookHref);
 			var hookPos = hookPot.offset().top - hookHeader;
 			$("html, body").animate({scrollTop: hookPos}, 300);
-			$('.sticky_nav li a').removeClass('active');
-			$(this).addClass('active');
+			//$('.sticky_nav li a').removeClass('active');
+			//$(this).addClass('active');
 		});
 	});