css 최신화

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

@@ -679,11 +679,11 @@ header .htop.trans{position:absolute; background:transparent !important;}
 header #htopSub{border-bottom: 0px solid #e5e5e5;box-sizing: border-box;}
 header #htopSubs{border-bottom: 0px solid #000000;box-sizing: border-box;}
 header #htopSub.my_main {background-color: #f5f5f5; border-bottom: 1px solid rgba(0, 0, 0, 0.0)!important;}
-header .htop h1 {display: inline-block;position: relative;width:auto;height: 5.5rem;line-height: 5.5rem;vertical-align: middle;margin: 0px 0 0 2.0rem;font-size: 1.8rem;color: #222;}
+header .htop h1 {display: inline-block;position: relative;width:auto;max-width: calc(100% - 14.5rem);height: 5.5rem;line-height: 5.5rem;vertical-align: middle;margin: 0px 0 0 2.0rem;font-size: 1.8rem;color: #222;}
 header .htop h1#htopTitle {display: inline-block;position: relative;max-width: 18rem;width: auto;height: 100%;line-height: 4.5rem;vertical-align: middle;padding: 0px 1.5rem 0px 0rem;font-size: 1.8rem;color: #222;}
 header .htop h1 a {height: 100%;width: 100%;display: block;}
 header .htop h1 img {margin: 0px 0;width: 10.666rem;height: auto;line-height: 1.6rem;vertical-align: middle;}
-header .htop h1 a p{color: #fff;line-height: 5.5rem;font-size: 2.0rem;height: 5.5rem;display: inline;vertical-align: middle;}
+header .htop h1 a p{color: #fff;line-height: 5.5rem;font-size: 2.0rem;height: 5.5rem;display: inline;vertical-align: middle;display: -webkit-box;word-break: break-all;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
 header .htop .btn_back {margin: 10px 0 0 15px;width: 35px;height: 35px;}
 header .htop .btn_back span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;}
 header .htop .btn_back span i {display: block;position: absolute;background: #222;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
@@ -708,7 +708,7 @@ header .htop .button_wrap .store span { width: 2.1rem; height: 1.4rem; position:
 header .subs {}
 
 
-header .btn_gnb {position: absolute;top: 0px;right: -4.5rem;width: 3.5rem;height: 100%;z-index: 10;}
+header .btn_gnb {position: absolute;top: 0px;right: -3.5rem;width: 3.5rem;height: 100%;z-index: 10;}
 header .btn_gnb span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;}
 header .btn_gnb span i {display: block;position: absolute;left: 0;width:100%;height: 100%;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
 /* header .btn_gnb span i.gl1 {top: 6px;} */

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

@@ -399,7 +399,7 @@
 .pd_detail .btn_brandHome{border-color:#a7a7a7;}
 
 /* 슬라이드아이템*/
-.item_prod {display: inline-block;font-size: 0px;vertical-align: top;color: rgb(31, 31, 31);position: relative;letter-spacing: -0.025em;}
+.item_prod {display: inline-block;width: 100%;font-size: 0px;vertical-align: top;color: rgb(31, 31, 31);position: relative;letter-spacing: -0.025em;}
 .item_prod .item_state {position: relative; padding:0; box-sizing: border-box;}
 .item_prod .item_state.soldout .itemPic:before {content:'SOLD OUT'; position: absolute; top: 50%; left: 50%; font-size: 2.0rem; font-weight: 500; color:#fff; background: rgba(0,0,0,.7); width: 100%; height: 100%; transform:translate(-50%, -50%); line-height: 12; z-index: 20; text-align: center;}
 .item_prod .item_state.AD .itemPic:before {content:'AD'; position: absolute; bottom: 0.666rem; right: 0.666rem; font-size: 1rem; font-weight: 300; letter-spacing: -0.025em; color:#888888; width: auto; height: auto; line-height: 1rem; z-index: 21; text-align: right;}
@@ -439,7 +439,7 @@
 .pd .itemBrand{width:calc(100% - 10%);}
 .pd .area_slider{text-align:left;}
 .pd .swiper-container{overflow:visible;}
-.pd .thumb_box .thumb_list .swiper-slide span{display: block;width: 100%;height: 5.5rem;background-color: #ffffff;opacity: 0.5;position: absolute;top: 0;left: 0;z-index: 1;}
+.pd .thumb_box .thumb_list .swiper-slide span{display: block;width: 100%;height: 5.5rem;background-color: #ffffff;opacity: 0.5;position: absolute;top: 0;left: 0;z-index: 3;}
 .pd .dot_info {position:relative; padding-left:0.8rem; font-size:1.1rem;}
 .pd .dot_info::before {content:'·'; position:absolute; left:0; top:0; line-height:inherit;}
 .pd .select_custom .combo .list{border:1px solid #000; border-top:0;max-height:100%;}
@@ -481,6 +481,7 @@
 .pd_detail > .inner.wide{padding-left:0!important; padding-right:0!important; padding-bottom:0;}
 
 .pd_detail .movbox {position: relative;height: 0;padding-top: 100%;padding-bottom:50.25%;overflow: hidden;transition: all 300ms ease;transform: scale(1);}
+.pd_detail .movbox #prodMovBtn{background: rgb(246 55 55 / 0%);  position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;color: transparent;font-size: 1px;z-index: 2;}
 .pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;pointer-events:none;}
 
 
@@ -634,7 +635,7 @@
 .pd_detail .benefit_box{padding-top:3rem;}
 /* 5 */
 .pd_detail .pd_together{padding-top:3rem;}
-.pd_detail .pd_together .item_prod .itemName{max-height: 3.3rem;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;white-space: normal;overflow-wrap: break-word;width: calc(100% - 10%);}
+.pd_detail .pd_together .item_prod .itemName{max-height: 3.3rem;min-height: 3rem; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;white-space: normal;overflow-wrap: break-word;width: calc(100% - 10%);}
 .pd_detail .brand_home{margin-bottom:-1.2rem;}
 .pd_detail .brand_home .link_go{display:block; padding:1rem 2rem; font-size:1.4rem; color:#222; font-weight:500; border-bottom:1px solid #eee;}
 .pd_detail .brand_home .link_go:before{content:''; display:inline-block; margin-right:1.2rem; width:3.4rem; height:3.4rem; background:#000 url(/images/mo/ico_branb_home.png) center center no-repeat; border-radius:50%; background-size:contain; vertical-align:middle;}
@@ -762,9 +763,9 @@
 .pd_detail .recommendedArea > div[class*="pd_"]:first-child{margin-top:0;}
 .pd_detail .recommendedArea > div[class*="pd_"] .tit{text-align:center;}
 .pd_detail .pd_clickother {}
-.pd_detail .pd_clickother .item_prod .itemName{display: block;max-height: 3.3rem; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: break-word;  width: calc(100% - 10%);}
+.pd_detail .pd_clickother .item_prod .itemName{display: block;max-height: 3.3rem;min-height:3rem; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: break-word;  width: calc(100% - 10%);}
 .pd_detail .pd_clickother .area_slider {}
-.pd_detail .pd_clickother .area_slider .itemName {height:3.2rem;}
+.pd_detail .pd_clickother .area_slider .itemName {}
 .pd_detail .pd_recommend {}
 .pd_detail .pd_recommend .area_slider {}
 .pd_detail .pd_recommend .area_slider .swiper-pagination {display:inline-block; width:auto; margin:0; padding:0.2rem 1rem; border-radius:2rem; font-size:1.2rem; color:#fff; background-color:rgba(34,34,34,.5);position:absolute; left:50%; bottom:2rem; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
@@ -812,7 +813,7 @@
 .product_floormenu .share_like > button.share{background:#000 url(/images/mo/ico_floorbtn_share.png) center center no-repeat; background-size:1.6rem;}
 /* .product_floormenu .share_like > button.like{background:#000 url(/images/mo/ico_floorbtn_like.png) center center no-repeat; background-size:2rem;} */
 .product_floormenu .share_like > button.itemLike {background:#000 url('/images/mo/ico_floorbtn_like.png') center center no-repeat;background-size:2rem;}
-.product_floormenu .share_like > button.itemLike:hover,
+/*.product_floormenu .share_like > button.itemLike:hover,*/
 .product_floormenu .share_like > button.itemLike.likeit {background:#000 url('/images/mo/ico_floorbtn_like_on.png') center center no-repeat;background-size:2rem;}
 .product_floormenu .share_like > button.itemLike::before,
 .product_floormenu .share_like > button.itemLike::after {display:none}
@@ -862,10 +863,12 @@
 .pd_pop.Purchase_pop .pop_option_select .opt_header .check_excluding.form_field input[type="checkbox"] + label{ font-size:1.3rem; color:#222;}
 .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;}
-.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 .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 .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(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;}
 .pd_pop.Purchase_pop .pop_option_select .setOption{}
 .pd_pop.Purchase_pop .pop_option_select .setOption .title{margin-bottom:1rem;}
 .pd_pop.Purchase_pop .pop_option_select .setOption .form_wrap{margin-top:2rem;}
@@ -923,7 +926,7 @@
 .modal.pd_pop.salecoupon_pop .coupon_list {line-height:1;}
 .modal.pd_pop.salecoupon_pop .coupon_list li {margin-top:1rem}
 .modal.pd_pop.salecoupon_pop .coupon_list li:first-child {margin-top:0}
-.modal.pd_pop.salecoupon_pop .coupon_list li:last-child{margin-bottom:3rem;}
+.modal.pd_pop.salecoupon_pop .coupon_list li:last-child{margin-bottom:6rem;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon {position:relative; border:1px solid #ddd; box-sizing:border-box; background:#fff;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div {position:relative; padding:3rem 0;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:1.5rem; height:3.0rem; background:#fff; z-index:2; border:1px solid #ddd; border-right:none; border-top-left-radius:1.5rem; border-bottom-left-radius:1.5rem; overflow:hidden;}
@@ -1059,11 +1062,17 @@
 .modal.pd_pop.info_size_pop .tbl.type2 {padding:0; border-top:1px solid #000;} 
 .modal.pd_pop.info_size_pop .tbl.type2 table {width:100%; word-break:keep-all;}
 .modal.pd_pop.info_size_pop .tbl.type2 table th,
-.modal.pd_pop.info_size_pop .tbl.type2 table td {position:relative; padding:1.5rem 0; border-bottom:1px solid #ddd; font-weight:200; font-size:1.4rem; letter-spacing:-0.025em; text-align:center;}
+.modal.pd_pop.info_size_pop .tbl.type2 table td {position:relative; padding:1.5rem 1rem; border-bottom:1px solid #ddd; font-weight:200; font-size:1.4rem; letter-spacing:-0.025em; text-align:center;}
 .modal.pd_pop.info_size_pop .tbl.type2 table th {font-weight:400; color:#222;}
 .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::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;}
+.modal.pd_pop.info_size_pop .tbl.scroll_tbl .body_t {float:left; width: 75% !important; display: block; white-space: nowrap; overflow-x: auto;}
+.modal.pd_pop.info_size_pop .tbl.scroll_tbl .body_t td {font-size: 1.4rem;}
+
 /* pd_popup > 재입고 알림 신청 */
 
 
@@ -1133,6 +1142,7 @@
 .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 .btnIcon_more{margin-bottom: 2rem;}
 .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;}
@@ -1364,9 +1374,9 @@
 .modal.pd_pop[class*="reviewdetail_pop"] .modal-body{margin-top:5.2rem; padding:0 0;}
 .modal.pd_pop[class*="reviewdetail_pop"] .modal-body .pd_review .area_rv_all .review_list{border-top:0;}
 .modal.pd_pop[class*="reviewdetail_pop"] .area_slider .thumb{position:relative; width:100%; height:100%; min-height:45.6rem;}
-.modal.pd_pop[class*="reviewdetail_pop"] .area_slider .thumb iframe {position: absolute;top: 0;left: 0;}
 .modal.pd_pop[class*="reviewdetail_pop"] .area_slider .thumb img,
 .modal.pd_pop[class*="reviewdetail_pop"] .area_slider .thumb video{position: absolute; left: 50%; right: 0; top: 45%; bottom: auto; transform: translate(-50%, -50%); width: auto; height: auto; max-height: 100%; max-width: 100%; margin: auto 0; cursor: pointer;}
+.modal.pd_pop[class*="reviewdetail_pop"] .area_slider .thumb iframe{position: absolute; top: 0;left: 0; right: 0; bottom: auto; transform: translate(0); width: auto; height: auto; max-height: 100%; max-width: 100%; margin: auto 0; cursor: pointer;}
 .modal.pd_pop[class*="reviewdetail_pop"] .area_slider .thumb{position:relative; background-color:#ddd; /*background-position:center center; background-repeat:no-repeat; background-size:contain;*/}
 .modal.pd_pop[class*="reviewdetail_pop"] .area_slider .thumb.nodata:before{display:block; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); z-index:1;}
 .modal.pd_pop[class*="reviewdetail_pop"] .area_slider .thumb.nodata:after{display:block; content:'리뷰에 등록된 이미지가 없습니다.'; position:absolute; top:50%; left:50%; width:90%; font-size:1.2rem; color:#fff; text-align:center; z-index:2; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
@@ -1471,7 +1481,7 @@
 .pd.deal .pd_dealitem .itemsGrp .item_prod {float:left; width:50%; padding:2rem 0.4rem 0; box-sizing:border-box;}
 .pd.deal .pd_dealitem .itemsGrp .item_prod .item_state {padding:0;}
 .pd.deal .pd_dealitem .itemsGrp .item_prod .item_state .btn{margin-top:1.5rem; width:100%; font-size:1.1rem; height:3rem; font-weight:300;}
-.pd.deal .pd_dealitem .item_prod .itemName{max-height: 3.3rem;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;white-space: normal;overflow-wrap: break-word;width: calc(100% - 10%);}
+.pd.deal .pd_dealitem .item_prod .itemName{min-height:3rem; max-height: 3.3rem;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;white-space: normal;overflow-wrap: break-word;width: calc(100% - 10%);}
 /*.pd.deal .pd_dealitem .itemLink .itemPic::after {content:''; background:none; background:rgba(34,34,34,0.8) url('/images/mo/btn_deal_item_more.png') no-repeat 50% 50%; background-size:5rem; opacity:0; -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; z-index:2;}*/
 .pd.deal .pd_dealitem .itemLink {}
 .pd.deal .pd_dealitem .itemLink:hover .itemPic::after,
@@ -1526,7 +1536,7 @@
 .pd_pop[class*="pd_list"] .modal_content .listpop_body{padding:1.5rem 1.33rem; min-height:43.2rem; max-height:40rem; box-sizing:border-box; overflow:auto;background:#fff;}
 .pd_pop[class*="pd_list"] .close {opacity: 1; position: absolute; z-index: 98; top: -3.8rem; left: 50%; transform: translate(-50%); display: block; border: 0; width: 1.6rem; height: 1.6rem; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(/images/mo/ico_pop_cls_w.png); background-color: transparent;}
 .pd_pop[class*="pd_list"].pd_listDescrp_pop{top:5.2rem;}
-.pd_pop[class*="pd_list"].pd_listDescrp_pop .modal_content{top:0; background-color:#646464;}
+.pd_pop[class*="pd_list"].pd_listDescrp_pop .modal_content{top:0; background-color:rgba(0,0,0,0.5);}
 .pd_pop[class*="pd_list"].pd_listDescrp_pop .modal_content:after{}
 .pd_listDescrp_pop .deal_list_select .list li{border-bottom:0 none;}
 .deal_list_select .select {cursor: pointer;display: inline-block; position: relative;font-size: 1.6rem;color: #333333;width: 100%; height:66px;}
@@ -1804,6 +1814,23 @@
 .dp .dp_subtitle{padding-top:4rem;}
 .dp .mid_banner{margin-top:-6rem;padding-bottom:3rem;}
 .dp .mid_banner .swiper-container.dp_lookbook_case1{margin-top:6rem;}
+.dp .mid_banner .swiper-container.dp_lookbook_case1 .swiper-slide{}
+.dp .mid_banner .swiper-container.dp_lookbook_case1 .swiper-slide a{}
+.dp .mid_banner .swiper-container.dp_lookbook_case1 .swiper-slide a div{
+  position: relative;
+  /* height: 11.3rem; */
+  overflow: hidden;
+  padding-top: 35%;
+}
+.dp .mid_banner .swiper-container.dp_lookbook_case1 .swiper-slide a div img{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: none;
+  width: auto;
+  height: 100%;
+}
 .dp .dp_detail_visual .fileAdd{margin-right:1rem}
 .dp .dp_detail_visual .pics{margin-bottom:1rem}
 /*.dp .dp_exhibition{background-color:#f5f5f5;}