CSS, JS 최신화

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

@@ -70,7 +70,7 @@
 #load {width: 100%;height: 100%;top: 0;left: 0;position: fixed;display: block;text-align: center;opacity: 0.8;background: #ffffff;background-image: url('/images/mo/movloading.gif');background-repeat: no-repeat;background-position: 50% 50%;background-size: 3.7rem 2.4rem;z-index: 99999;}
 /* Basic setting */
 html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
-body {margin: 0;}
+body {margin: 0; -webkit-overflow-scrolling: touch;}
 article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,address {display: block;}
 address {font-style: normal;}
 a {color: inherit;background-color: transparent;text-decoration: none;}
@@ -653,7 +653,7 @@ top: 9px;border-color: transparent transparent #888888 transparent;}
 /* Page setup */
 html {font-family: 'LATO', 'Noto Sans kr', sans-serif;font-weight: 300;color: #222;font-size: 10px;line-height: 1.4;letter-spacing: -.025em;word-break: keep-all;}
 
-body.gnb_on {height: 100vh;overflow: hidden;}
+body.gnb_on {height: 100vh;overflow: hidden !important;}
 .app {height: 100vh;font-size: 1.4rem;}
 .skipNav {overflow: hidden;position: absolute;left: -9999px;width: 0;height: 1px;margin: 0;padding: 0;}
 
@@ -662,14 +662,14 @@ body.gnb_on {height: 100vh;overflow: hidden;}
 .inner::after {content: '';display: block;clear: both;}
 .inner.bg_gray {background-color: #f5f5f5 !important;}
 .inner.bg_beige {background-color: #ffeee7 !important;}
-.inner.bg_dark {background-color: #222222 !important;}
+.inner.bg_dark {background-color: #222222 !important;margin-bottom: -3rem;}
 .inner.bg_dark .titWrap>* {color: #ffffff !important;}
 .inner.bg_dark .titWrap a H2{color: #ffffff !important;}
 
 /* header, htop, btn_gnb, header.main, hmenu, bng, bnb */
 header {
-  position: fixed;left: 0;top: 0;width: 100%;z-index: 80;
-  /*position: sticky;*/left: 0;top: 0;width: 100%;transition: top 0.3s;/* background-color: #fff; */
+  position: fixed;left: 0;top: 0; width: 100%;z-index: 80;
+  /*position: sticky;*/width: 100%;transition: top 0.3s;/* background-color: #fff; */ transform: translate3d(0,0,0);
 } /* 210526_ main.container 여백 때문에 sticky 속성 주석. */
 header::after{content: '';display: block;clear: both;}
 header .htop {position: relative;height: 55px;-webkit-box-sizing: border-box;box-sizing: border-box;/*border: rgba(0, 0, 0, 0.1) solid 1px;*/ border-bottom: 1px solid rgba(0, 0, 0, 0.0); background-color: #fff;}
@@ -869,15 +869,16 @@ body.header-show .app .gnb{top: 50px;}
 .app .gnb.expand .btn-expand::after {background: url(/images/mo/ico_btn_narrow.png) center bottom/1.8rem 2.0rem no-repeat;}
 
 main.container{margin-top: 0; overflow: hidden;}
+main.container.mb {margin-top: -5.5rem;}
 main.container .inner:last-child{padding-bottom: 6.0rem; margin-bottom: 0;}
 
 /* 페이지별 헤더 세팅 */
-section.content {margin-top: 5.5rem;}
-section.main, section.ev_list, section.dp_exhibition, section.dp_lookbook, section.dp_outlets, section.dp_submain, section.dp_hotdeal, section.br_main, section.dp_best {margin-top: 11.1rem;}
-section.main.scr, section.ev_list.scr, section.dp_exhibition.scr, section.dp_lookbook.scr, section.dp_outlets.scr, section.dp_submain.scr, section.dp_hotdeal.scr, section.br_main.scr, section.dp_best.scr {margin-top: 5.5rem;}
+main.app-only section.sett, main.app-only section.notice, section.content {margin-top: 5.5rem;}
+section.main, section.ev_list, section.dp_exhibition, section.dp_lookbook, section.dp_outlets, section.dp_submain, section.dp_hotdeal, section.br_main, section.dp_best, section.br_lookbook {margin-top: 11rem;}
+section.main.scr, section.ev_list.scr, section.dp_exhibition.scr, section.dp_lookbook.scr, section.dp_outlets.scr, section.dp_submain.scr, section.dp_hotdeal.scr, section.br_main.scr, section.dp_best.scr, section.br_lookbook.scr {margin-top: 5.5rem;}
 
 /* .tabbar */
-.tabbar{-webkit-transform: translate(0, 55px);-ms-transform: translate(0, 55px);-moz-transform: translate(0, 55px); transform: translate(0, 55px);transition-duration: 0.3s; position: fixed;width: 100%;bottom: 0;background-color: #f8f8f8;z-index: 20; padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
+.tabbar{-webkit-transform: translate(0, 80px);-ms-transform: translate(0, 80px);-moz-transform: translate(0, 80px); transform: translate(0, 80px);transition-duration: 0.25s; position: fixed;width: 100%;bottom: 0;background-color: #f8f8f8;z-index: 20; padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
 .tabbar.fixed{-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0);}
 .tabbar .tabbar-inner{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-pack: justify;-moz-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between; padding: 10px 20px;}
 .tabbar .tabbar-inner [class*=btn-]{display: block;width: 2.50rem; height: 2.2666rem; font-size: 0;position: relative;background: url(/images/mo/ico_tabbar.png) no-repeat center;background-size: 18.0rem 2.16rem;}
@@ -932,7 +933,7 @@ section.main.scr, section.ev_list.scr, section.dp_exhibition.scr, section.dp_loo
 
 /* footer */
 footer{background-color: #f1f1f1;}
-footer .btn_top{position: fixed; bottom: 8%; right: 2.0rem; opacity: 0; background-color: rgba(0, 0, 0, 0.4); width: 4.1rem; height: 4.0rem; font-size: 0; z-index: 50; background:url(/images/mo/mo_btn_top.png) no-repeat;}
+footer .btn_top{position: fixed; bottom: 9%; right: 2.0rem; opacity: 0; background-color: rgba(0, 0, 0, 0.4); width: 4.1rem; height: 4.0rem; font-size: 0; z-index: 50; background:url(/images/mo/mo_btn_top.png) no-repeat;}
 footer .btn_top span{display: block;width: 2.4rem;height: 2.4rem;margin: 0 auto;position: relative;opacity: 1;color: #222222;font-size: 1.1rem;font-weight: 600;line-height: 3.4rem;letter-spacing: -0.025em;}
 footer .f1{background-color: #f1f1f1;padding: 0 0 4.5rem; position: relative;}
 footer .f1 .inner{padding: 0 2.0rem 2.0rem;}
@@ -1005,6 +1006,8 @@ footer .collapse .infos.on{padding: 0px 0px 20px 0; height: auto;}
 .cnb ul > li button.on{background-color: #3d3d3d; color: #fff;}
 
 /* page nav */
+.pnb {margin-top: 5.5rem;}
+.pnb + section {margin-top: 0;}
 .pnb ul{border-bottom: #e5e5e5 solid 1px;}
 .pnb ul::after{content: ''; display: block; clear: both;}
 .pnb ul > li{float: left; width: auto; padding: 0 1.6rem;}
@@ -1393,7 +1396,8 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 .dialog-mobile .dialog-cancel-button {
 	color: #000;
 	background: #fff;
-	border:1px solid #999;
+	border:0;
+	border-top:1px solid #dddddd;
 	/* min-width:10.0rem; */
 }
 .dialog-mobile .dialog-sure-button{
@@ -1854,59 +1858,59 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 .mgc {margin:0 auto;}
 .mt0 {margin-top:0 !important;}
 .ml0 {margin-left:0 !important;}
-.ml5 {margin-left:5px !important;}
-.ml10{margin-left:10px !important;}
-.ml15 {margin-left:15px !important;}
-.ml20 {margin-left:20px !important;}
-.ml30 {margin-left:30px !important;}
-.mr0{margin-right:0px !important;}
-.mr20 {margin-right:20px !important;}
-.mt5 {margin-top:5px !important;}
-.mt10 {margin-top:10px !important;}
-.mt15 {margin-top:15px !important;}
-.mt20 {margin-top:20px !important;}
-.mt30 {margin-top:30px !important;}
-.mt35 {margin-top:35px !important;}
-.mt40 {margin-top:40px !important;}
-.mt45 {margin-top:45px !important;}
-.mt50 {margin-top:50px !important;}
-.mt60 {margin-top:60px !important;}
-.mt100 {margin-top:100px !important;}
+.ml5 {margin-left:0.5rem !important;}
+.ml10{margin-left:1.0rem !important;}
+.ml15 {margin-left:1.5rem !important;}
+.ml20 {margin-left:2.0rem !important;}
+.ml30 {margin-left:3.0rem !important;}
+.mr0{margin-right:0 !important;}
+.mr20 {margin-right:2.0rem !important;}
+.mt5 {margin-top:0.5.0rem !important;}
+.mt10 {margin-top:1.0rem !important;}
+.mt15 {margin-top:1.5.0rem !important;}
+.mt20 {margin-top:2.0rem !important;}
+.mt30 {margin-top:3.0rem !important;}
+.mt35 {margin-top:3.5rem !important;}
+.mt40 {margin-top:4.0rem !important;}
+.mt45 {margin-top:4.5rem !important;}
+.mt50 {margin-top:5.0rem !important;}
+.mt60 {margin-top:6.0rem !important;}
+.mt100 {margin-top:10.0rem !important;}
 .mb0 {margin-bottom:0 !important}
-.mb5 {margin-bottom:5px !important}
-.mb10 {margin-bottom:10px !important;}
-.mb15 {margin-bottom:15px !important;}
-.mb20 {margin-bottom:20px !important;}
-.mb30 {margin-bottom:30px !important;}
-.mb40 {margin-bottom:40px !important;}
-.mb50 {margin-bottom:50px !important;}
-.mb60 {margin-bottom:60px !important;}
-.mb100 {margin-bottom:100px !important;}
-.mr5 {margin-right:5px !important;}
-.mr10 {margin-right:10px !important;}
-.mr15 {margin-right:15px !important;}
-.ml10 {margin-left:10px !important;}
-.ml35 {margin-left:35px !important;}
-.mtm3 {margin-top:-3px !important;}
-.mtm10 {margin-top:-10px !important;}
-.mtm20 {margin-top:-20px !important;}
-.mbm10 {margin-bottom:-10px !important;}
-.mbm30{margin-bottom:-30px !important;}
+.mb5 {margin-bottom:0.5rem !important}
+.mb10 {margin-bottom:1.0rem !important;}
+.mb15 {margin-bottom:1.5rem !important;}
+.mb20 {margin-bottom:2.0rem !important;}
+.mb30 {margin-bottom:3.0rem !important;}
+.mb40 {margin-bottom:4.0rem !important;}
+.mb50 {margin-bottom:5.0rem !important;}
+.mb60 {margin-bottom:6.0rem !important;}
+.mb100 {margin-bottom:10.0rem !important;}
+.mr5 {margin-right:0.5rem !important;}
+.mr10 {margin-right:1.0rem !important;}
+.mr15 {margin-right:1.5rem !important;}
+.ml10 {margin-left:1.0rem !important;}
+.ml35 {margin-left:3.5rem !important;}
+.mtm3 {margin-top:-0.3rem !important;}
+.mtm10 {margin-top:-1.0rem !important;}
+.mtm20 {margin-top:-2.0rem !important;}
+.mbm10 {margin-bottom:-1.0rem !important;}
+.mbm30{margin-bottom:-3.0rem !important;}
 .pt0 {padding-top:0 !important;}
-.pt10 {padding-top:10px !important;}
-.pt20 {padding-top:20px !important;}
-.pt30 {padding-top:20px !important;}
-.pt40 {padding-top:40px !important;}
-.pt100 {padding-top:100px !important;}
+.pt10 {padding-top:1.0rem !important;}
+.pt20 {padding-top:2.0rem !important;}
+.pt30 {padding-top:2.0rem !important;}
+.pt40 {padding-top:4.0rem !important;}
+.pt100 {padding-top:10.0rem !important;}
 .pl0 {padding-left:0 !important;}
-.pl10 {padding-left:10px !important;}
-.pr20 {padding-right:20px !important;}
-.pb10 {padding-bottom:10px !important;}
-.pb20 {padding-bottom:20px !important;}
-.pb30 {padding-bottom:30px !important;}
-.pb40 {padding-bottom:40px !important;}
-.pb50 {padding-bottom:50px !important;}
-.pb100 {padding-bottom:100px !important;}
+.pl10 {padding-left:1.0rem !important;}
+.pr20 {padding-right:2.0rem !important;}
+.pb10 {padding-bottom:1.0rem !important;}
+.pb20 {padding-bottom:2.0rem !important;}
+.pb30 {padding-bottom:3.0rem !important;}
+.pb40 {padding-bottom:4.0rem !important;}
+.pb50 {padding-bottom:5.0rem !important;}
+.pb100 {padding-bottom:10.0rem !important;}
 
 .shape.ranker {background: #fd4802;}
 .shape.ranker::after {
@@ -1914,25 +1918,25 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
   border-right:0px solid #fd4802 !important;
 }
 .shape{
-  background: #222222;width: 3rem;max-width: 3rem;min-height: 4rem;display: block;position: absolute;top: 0;left: 0;z-index: 9;
+  background: #222222;width: 3rem;max-width: 3rem;min-height: 4rem;display: block;position: absolute;top: 0;left: 0;z-index: 9;border-radius: 0 0 0.2rem 0;
 }
 .shape:after{
-  content: "";top: 0;right: -10px;position: absolute;
-  border-left: 10px solid #222222;border-bottom: 10px solid transparent;border-right: 0px solid #0183fd;
+  content: "";top: 0;right: -0.94rem;position: absolute;
+  border-left: 1.0rem solid #222222;border-bottom: 1.0rem solid transparent;border-right: 0px solid #0183fd;
   height: 3rem;width: 0;padding: 0px 0px 0px 0px;
 }
 .shape span{
-  color: #ffffff;text-align: center;text-indent: 10px;font-size: 1.1rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40px;z-index: 2;
+  color: #ffffff;text-align: center;text-indent: 1.0rem;font-size: 1.1rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40px;z-index: 2;
   /* line-height: 1; */
   /* letter-spacing: -25em; */
   /* display: -webkit-box; */
   /* z-index: 99999; */
 }
 .shape.dealdetail{
-  width: 100%;max-width: 40px;
+  width: 100%;max-width: 4.0rem;
 }
 .shape.dealdetail span{
-  line-height: 1;text-align: center;width: 100%;display: inline-block;text-indent: 0;margin-left: 5px;
+  line-height: 1;text-align: center;width: 100%;display: inline-block;text-indent: 0;margin-left: 0.5rem;
 }
 
 

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

@@ -414,8 +414,8 @@
 /* .item_prod .itemLike.active::before {opacity: 1;} */
 .itemLike.likeit::before {opacity: 1;}
 .item_prod .itemLink {position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
-.item_prod .itemPic {position: relative;width: 100%;margin-bottom: 1.5rem;padding-top: 150%;font-size: 0px;overflow: hidden; background-color: #f9f9f9;}
-/*.item_prod .itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.03;background-color: rgb(0, 0, 0);}*/
+.item_prod .itemPic {position: relative;width: 100%;margin-bottom: 1.5rem;padding-top: 150%;font-size: 0px;overflow: hidden; }
+.item_prod .itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.03;background-color: rgb(0, 0, 0);}
 .item_prod .itemPic .pd_img {position: absolute;width: 100%;height: auto;top: 50%;left: 0px;transform: translateY(-50%);}
 .item_prod .itemPic .pd_mov {position: absolute;width: 100%;height: 100%;top: 50%;left: 0px;transform: translateY(-50%);z-index: 2;}
 .item_prod .itemBrand {display: inline-block; margin: 0px 0.5rem 0.3rem; font-size: 1rem;font-weight: 300;color: rgb(137, 137, 137); text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:10rem;overflow:hidden;}
@@ -470,6 +470,7 @@
 .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;}
 .pd_detail > .inner:last-child::after{content: '';width: 100%;height: 0rem;}
 .pd_detail .pd_info > .inner:last-child {margin-bottom: 1.2rem;padding-bottom: 3rem;}
+.pd_detail .pd_desc_wrap .tab_detail_cont.pd_review {margin-bottom:-1.2rem}
 /* 1 */
 .pd_detail{background-color:#f5f5f5;}
 .pd_detail .pd_info > .inner,
@@ -823,6 +824,7 @@
 .product_floormenu .prd_buy > .cantbuying{display:none;}
 .product_floormenu.soldout .prd_buy > .buying{display:none;}
 .product_floormenu.soldout .prd_buy > .cantbuying{display:block; background-color:#ddd;}
+.product_floormenu.fixed{-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0);}
 
 /* 토스트팝업 > 구매하기 */
 .container.btPop_full.pd_open::after, 
@@ -854,7 +856,7 @@
 
 /* 토스트팝업 > 구매하기 > 옵션선택팝업 */
 .pd .pd_detail .pd_pop.Purchase_pop .form_field:nth-child(1) .select_custom.option_open .combo .select{min-height: 4.5rem;}
-.pd .pd_detail .pd_pop.Purchase_pop .form_field:nth-child(1) .select_custom.option_open .combo .select::before{content: '옵션을 선택해주세요';display: inline-block;width: 100%;height: 0;position: absolute;left: 1rem; color:#333333}
+.pd .pd_detail .pd_pop.Purchase_pop .form_field:nth-child(1) .select_custom.option_open .combo .select::before{content: '';display: inline-block;width: 100%;height: 0;position: absolute;left: 1rem; color:#333333}
 .pd_pop.Purchase_pop .pop_option_select{display:none; position:absolute; bottom:0; left:0; width:100%; box-sizing:border-box; z-index:500; background: #fff; height:100%;}
 .pd_pop.Purchase_pop .pop_option_select .pp_body{position:relative; padding:2rem; overflow:auto; max-height:100%; background-color:#fff;}
 .pd_pop.Purchase_pop .pop_option_select .close{opacity: 1; position: absolute; z-index: 98; top: -3.8rem; left: 50%; transform: translate(-50%); display: block; border: 0; width:3.6rem; height:1.6rem; background-image: url(/images/mo/ico_pop_cls_w.png); text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: transparent;}
@@ -866,8 +868,9 @@
 .pd_pop.Purchase_pop .pop_option_select .text_excluding{margin-top:-1rem; padding:1.2rem; background-color:#383838; font-size:1.3rem; color:#fff; text-align:center;}
 .pd_pop.Purchase_pop .select_custom .combo .select{font-size:1.4rem; height:auto; text-overflow: ellipsis; word-wrap: normal; overflow: hidden; padding-right: 4rem;}
 .pd.deal .pd_detail .pd_pop.Purchase_pop .select_custom .combo .select{color: #777777;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;overflow: hidden;padding-right: 4rem;padding-left: 5rem; min-height:4.5rem;}
+.pd.deal .pd_detail .pd_pop.Purchase_pop .option_box .select_custom .combo .select{padding-left:1.5rem; color: #333333;}
 .pd.deal .pd_detail .pd_pop.Purchase_pop .form_field:nth-child(1) .select_custom .combo .select::before{content: '상품';display: inline-block;width: 0;height: 0;position: absolute;left: 1rem; color:#333333;}
-.pd.deal .pd_detail .pd_pop.Purchase_pop .form_field:nth-child(1) .select_custom.option_open .combo .select::before{content: '옵션을 선택해주세요';display: inline-block;width: 0;height: 0;position: absolute;left: 1rem; color:#333333}
+.pd.deal .pd_detail .pd_pop.Purchase_pop .form_field:nth-child(1) .select_custom.option_open .combo .select::before{content: '';display: inline-block;width: 0;height: 0;position: absolute;left: 1rem; color:#333333}
 .pd.deal .pd_detail .pd_pop.Purchase_pop .form_field:nth-child(2) .select_custom .combo .select::before{content: '옵션1';display: inline-block;width: 0;height: 0;position: absolute;left: 1rem; color:#333333}
 .pd.deal .pd_detail .pd_pop.Purchase_pop .form_field:nth-child(3) .select_custom .combo .select::before{content: '옵션2';display: inline-block;width: 0;height: 0;position: absolute;left: 1rem; color:#333333}
 .pd.deal .pd_detail .select_custom .select .item_prod .item_state .itemLink .itemName{text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:100%;overflow:hidden; color:#777;}
@@ -1071,6 +1074,8 @@
 .modal.pd_pop.info_size_pop .tbl.type2 table td{color:#000; font-weight:300; font-size:1.3rem;}
 .modal.pd_pop.info_size_pop .tbl.type2 table thead tr{background:#f5f5f5;}
 
+.modal.pd_pop.info_size_pop .tbl.scroll_tbl {position: relative;}
+.modal.pd_pop.info_size_pop .tbl.scroll_tbl::before {content:''; position: absolute; top: 0; right: 0; width: 2rem; height: 100%; background:linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 1%,rgba(255,255,255,0.5) 36%,rgba(255,255,255,1) 100%); z-index: 5;}
 .modal.pd_pop.info_size_pop .tbl.scroll_tbl::after {content:''; clear:both; display: block;}
 .modal.pd_pop.info_size_pop .tbl.scroll_tbl .head_t {float:left; width: 25% !important; display: block;}
 .modal.pd_pop.info_size_pop .tbl.scroll_tbl .head_t td {font-size: 1.4rem; font-weight: 400;}
@@ -1094,7 +1099,7 @@
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; width:7.0rem; height:10.5rem; padding:0; margin-bottom:0; z-index:2;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemBrand {display:block; margin:0; width : calc(100% - 10%)}
 /*.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-left:0;}*/
-.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-top:0.5rem; font-size:1.3rem; max-height: 3.3rem; margin-left:0; margin-right:0; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word; width : calc(100% - 5%)}
+.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-top:0.5rem; font-size:1.3rem; height: 3.3rem; margin-left:0; margin-right:0; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word; width : calc(100% - 5%)}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPrice {margin:0;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPrice .lap{position: relative;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPrice .lap .itemPercent {position:relative;}
@@ -1555,7 +1560,7 @@
 .deal_list_select .list .item_prod .itemLink{position: relative; display:table-cell; width: 100%; height:102px; padding-left:88px; padding-right:1rem; box-sizing:border-box; vertical-align: middle;}
 .deal_list_select .list .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; padding:0; margin-bottom:0; width:68px; height:102px; z-index:2;}
 .deal_list_select .list .item_prod .item_state .itemLink .itemBrand {display:block; padding-right: 4rem; font-size:1rem; color:#888888; font-weight:300;}
-.deal_list_select .list .item_prod .item_state .itemLink .itemName {display:block; margin:0.5rem 0 0.8rem; font-size:1.3rem; max-height: 3.3rem; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word;}
+.deal_list_select .list .item_prod .item_state .itemLink .itemName {display:block; margin:0.5rem 0 0.8rem; font-size:1.3rem; height:3.3rem; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word;}
 .deal_list_select .list .item_prod .item_state .itemLink .itemText{margin-top:0.5rem; font-size:1.1rem; color:#888888; font-weight:300;}
 .deal_list_select .list .item_prod .item_state .itemLink .itemPrice{margin-right:0; margin-left:0;}
 .deal_list_select .list .item_prod .item_state.active:after{border-color:#fd4802;}
@@ -1587,7 +1592,7 @@
 .item_blk .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; padding: 0; width:40px; height:60px; z-index:2;}
 /*.item_blk .item_prod .item_state .itemLink .itemBrand {display:block; font-size:1rem; color:#888888; font-weight:300; margin-left:0; margin-right:0; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width : calc(100% - 20%);overflow:hidden;}*/
 .item_blk .item_prod .item_state .itemLink .itemBrand {min-width:88%;}
-.item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-top:0.5rem; font-size:1.3rem; max-height: 3.3rem; margin-left:0; margin-right:0; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word; width:calc(100% - 5%);}
+.item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-top:0.5rem; font-size:1.3rem; height: 3.3rem; margin-left:0; margin-right:0; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word; width:calc(100% - 5%);}
 .item_blk .item_prod .item_state .itemLink .itemPrice{margin-left:0; margin-right:0;}
 /*select_custom > item_prod*/
 .select_custom .select .item_prod{margin:0; padding-right:0; overflow:hidden;pointer-events: none;}
@@ -2269,7 +2274,7 @@
 .br .br_main .itemsGrp .item_prod:nth-child(2){margin-top:0rem;}
 .br .br_main .itemsGrp:after{display:block; content:''; clear:both;}
 .br .br_main .swiper-pagination{margin:0; bottom:auto;}
-.br .pnb_mo{position:relative;}
+.br .pnb_mo{position:relative; display: none;}
 .br .pnb_mo > ul{display:flex; padding:0 0.8rem; height:5rem; line-height:5rem; background-color:#222222;}
 .br .pnb_mo > ul > li > a{font-size:1.6rem; color:#686868; font-weight:500; padding:0 1.2rem;}
 .br .pnb_mo > ul > li > a.on{color:#fff}
@@ -2394,6 +2399,7 @@
 .br .brand_si{margin-top:0.1rem;}
 .br .brand_si .swiper-wrapper{height:0;}
 .br .brand_si .swiper-wrapper .swiper-slide:nth-child(odd){border-bottom:0rem none;}
+.br_search_wrap {margin-top: 5.5rem;}
 .br_search_wrap .swiper-pagination{margin:0;}
 .br_search_wrap .swiper-container { width: 100%; height: 21.4rem; margin-left: auto; margin-right: auto; }
 .br_search_wrap .swiper-slide { text-align: center; font-size: 1.8rem; background: #fff; height: calc((100% - 30px) / 2); /* Center slide text vertically--> */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
@@ -2436,7 +2442,7 @@
 .modal.pop_full.sch .modal-header {border-bottom: 0;}
 .modal.pop_full.sch .modal-body {padding:0;}
 .sch {font-size: 1.4rem;}
-.sch .sch_result{background-color:#f5f5f5;}
+.sch .sch_result{background-color:#f5f5f5; margin-top: 5.5rem;}
 .sch .sch_result .inner{background-color:#fff; margin-bottom: 1.2rem; padding:1.3rem 2.0rem;}
 .sch .sch_result .inner.wide {padding:1.3rem 0;}
 .sch .sch_result .sch_title { width: 100%; height: 4.3rem; margin: 0 0; border-bottom: 0.2rem solid black; position: relative;}

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

@@ -1453,6 +1453,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 .my_delivery .blocker:before {display: none;}
 .my_delivery .modal .modal-body {margin-bottom: 4.5rem;}
 .my_delivery .modal .modal-footer {position: fixed; left: 0; bottom: 0; width: 100%;}
+.my .my_delivery .inner {padding: 0;}
 .my .my_delivery .inner > .btn_group {position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99; transition:all 0.3s;}
 .my .my_delivery .inner > .btn_group.active {transform: translate(0, -4.3rem);}
 .my .my_delivery .inner:last-child {padding-bottom: 0;}
@@ -2479,7 +2480,7 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 
 /* od_gift_1 */
 main.container .od_gift .inner:last-child {padding-bottom: 0;}
-.od_gift .gift_banner {background: linear-gradient(120deg, rgba(255,120,0,1) 50%, rgba(253,72,2,1) 100%); text-align: center; padding:6rem 0; margin:-1.2rem 0;}
+.od_gift .gift_banner {background: linear-gradient(120deg, rgba(255,120,0,1) 50%, rgba(253,72,2,1) 100%); text-align: center; padding:6rem 0; margin:-6.7rem 0 -1.2rem;}
 .od_gift .gift_banner img {width: 13.1rem;}
 .od_gift .gift_banner p {color:#fff; margin-top: 1.5rem;}
 .od_gift .gift_banner.timeout {background: #f5f5f5;}

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

@@ -313,11 +313,13 @@ $(document).ready(function () {
                     $("header").css('display', 'none');
                     $("header").css('position', 'fixed');
                     $(".tabbar").removeClass("fixed");
+                    $(".product_floormenu").removeClass("fixed");
                 //스크롤 내릴때
                 } else {
                     $("header").css('display', 'block');
                     $("header").css('position', 'fixed');
                     $(".tabbar").addClass("fixed");
+                    $(".product_floormenu").addClass("fixed");
                 }
                 lastScrollTop = commonSt;
             //경우2 : htopMian + gnb
@@ -332,6 +334,7 @@ $(document).ready(function () {
                     $("#gnb").css('position', 'fixed');
                     $("#gnb").css('top', '0');
                     $(".tabbar").removeClass("fixed");
+                    $(".product_floormenu").removeClass("fixed");
                     $("section.content, section.main, .bnrtype_banner").addClass('scr');
                 //스크롤 내릴때
                 } else {
@@ -341,6 +344,17 @@ $(document).ready(function () {
                     $("#gnb").css('position', 'fixed');
                     $("#gnb").css('top', '55px');
                     $(".tabbar").addClass("fixed");
+                    $(".product_floormenu").addClass("fixed");
+                    $("section.content, section.main, .bnrtype_banner").removeClass('scr');
+                }
+                if(commonSt < 170){
+                    $("header").css('display', 'block');
+                    $("header").css('position', 'fixed');
+                    $("#gnb").css('display', 'block');
+                    $("#gnb").css('position', 'fixed');
+                    $("#gnb").css('top', '55px');
+                    $(".tabbar").addClass("fixed");
+                    $(".product_floormenu").addClass("fixed");
                     $("section.content, section.main, .bnrtype_banner").removeClass('scr');
                 }
                 lastScrollTop = commonSt;
@@ -352,9 +366,11 @@ $(document).ready(function () {
                 //스크롤 올릴때
                 if (commonSt > lastScrollTop) {
                     $(".tabbar").removeClass("fixed");
+                    $(".product_floormenu").removeClass("fixed");
                 //스크롤 내릴때
                 } else {
                     $(".tabbar").addClass("fixed");
+                    $(".product_floormenu").addClass("fixed");
                 }
                 lastScrollTop = commonSt;
             }

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

@@ -798,8 +798,8 @@ content: "〉";font-size: 12px;padding-left: 8px;
 .itemLike.likeit::before {opacity: 1;}
 
 .itemLink {z-index:20;position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
-.itemPic {position: relative;width: 100%;margin-bottom:20px;padding-top: 150%;font-size: 0px;overflow: hidden;background-color: #f9f9f9;}
-.itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0;background-color: rgb(0, 0, 0);z-index: 999;}
+.itemPic {position: relative;width: 100%;margin-bottom:20px;padding-top: 150%;font-size: 0px;overflow: hidden;}
+.itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.03;background-color: rgb(0, 0, 0);z-index: 999;}
 .itemPic .pd_img,
 .itemPic .pd_mov {position: absolute;width: 100%;height: auto;top: 50%;left: 0px;transform: translateY(-50%);}
 .itemPic .pd_mov {z-index: 2;height: 100%;}
@@ -867,10 +867,10 @@ content: "〉";font-size: 12px;padding-left: 8px;
     border-right:0px solid #fd4802 !important;
 }
 .shape{
-    background: #222222;width: 40px;max-width: 40px;min-height: 50px;display: block;position: absolute;top: 0;left: 0;z-index: 9;
+    background: #222222;width: 40px;max-width: 40px;min-height: 50px;display: block;position: absolute;top: 0;left: 0;z-index: 9;border-radius: 0 0 2px 0;
 }
 .shape:after{
-    content: "";top: 0;right: -10px;position: absolute;
+    content: "";top: 0;right: -9px;position: absolute;
     border-left: 10px solid #222222;border-bottom: 10px solid transparent;border-right: 0px solid #0183fd;
     height: 40px;width: 0;padding: 0px 0px 0px 0px;
 }