/* BASIC css start */ .txt_center {text-align:center !important; } .header_box .basket_btn .ic_basket .count { background:#C5AB85 !important; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;} .main .topBanner {margin-top:15px;} .main .topBanner .topBannerLeft {width:49%; float:left; position:relative;} .main .topBanner .topBannerRight {width:49%; float:right; position:relative;} .main .topBanner img {width:100%; vertical-align:top;} .main .topBanner .topBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;} .visual_box {position:relative; overflow:hidden; min-height:520px} .visual_box:after{clear:both; display:block; content:'';} .visual_box .swiper-slide a {display:block; padding-bottom: 145.5%!important;} .visual_box .swiper-slide a img { width:100%; position: absolute; top:0; left:0; } .visual_box .swiper-slide a .text {font-size: 18px;color: #fff;line-height: 1.7;position: absolute;top: 80%;left:5%; width: 100%;} .visual_box .swiper-scrollbar-box {position: absolute; left:0; bottom: 18px; box-sizing:border-box; padding:0 10%; z-index: 50; width:100%} .visual_box .swiper-scrollbar { width:100% !important; height:2px !important; border-radius:0; opacity:1; background:#F4F4D6 } .visual_box .swiper-scrollbar-drag {background:#C1AC8A; border-radius:0;} .visual_box .swiper-pagination {bottom: 18px !important;width:100% !important;display:flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding-left: 1%;} .visual_box .swiper-pagination-bullet{cursor: pointer;height:2px !important;border-radius:0;opacity:1;background:#F4F4D6;margin:0 !important;width: 100%;transition: all ease 0.5s;} .visual_box .swiper-pagination-bullet-active{background:#C1AC8A !important;width: 100%;} #mainEachList .swiper-slide {font-size:0} #mainEachList .swiper-slide .img_box { position:relative; } #mainEachList .swiper-slide .img_box a .img_txt {position:absolute;top:0;left:0;width:100%;display: flex;height:100%;align-items: flex-start;justify-content: flex-end;flex-direction: column; box-sizing:border-box; padding:0 40px 70px} #mainEachList .swiper-slide .img_box a .img_txt .tt {line-height:1.5; color:#fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 400px; max-height: 84px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; font-size: 32px; font-weight: 600;} #mainEachList .swiper-slide .img_box a .img_txt .dec {color:#fff;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-width: 400px;max-height: 46px;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;font-size:17px;line-height: 1.5;} .swiper_list {padding-left:10px!important;} .swiper_list .swiper-slide {width:233px} .swiper_list .swiper-scrollbar-box { margin-top:24px; box-sizing:border-box; padding:0 calc(10% - 10px); z-index: 50; width:100%} .swiper_list .swiper-scrollbar {width:calc(100% - 20px)!important; height:2px !important; left:10px!important; border-radius:0; opacity:1; background:rgba(158, 158, 158, 0.5) } .swiper_list .swiper-scrollbar-drag {background:#C1AC8A; border-radius:0;} .swiper_list3 {padding-left:10px!important;} .swiper_list3 .swiper-slide {width:233px} .swiper_list3 .swiper-scrollbar-box { margin-top:24px; box-sizing:border-box; padding:0 calc(10% - 10px); z-index: 50; width:100%} .swiper_list3 .swiper-scrollbar {width:calc(100% - 20px)!important; height:2px !important; left:10px!important; border-radius:0; opacity:1; background:rgba(158, 158, 158, 0.5) } .swiper_list3 .swiper-scrollbar-drag {background:#C1AC8A; border-radius:0;} .planWrap{margin-top:30px; position: relative; overflow: hidden;} .planWrap p {color:#000} .planTxArea{position: relative; overflow: hidden;margin-right: 15px;margin-left: 15px;margin-bottom: 0;margin-top:10px; padding-top:5px;} .planTxArea .newTit {padding-top:10px;font-size:26px;margin-top:10px; font-weight:400; margin-bottom:15px; letter-spacing: -0.01em; line-height:2} .planTxArea .newsubTit{font-size:14px;line-height:12px;margin-bottom: 20px; font-weight:300;} .seeBtn {position:absolute; bottom:21px; right:0; font-size:12px; font-weight:400; border-bottom:1px solid #000} .banner_box {margin:28px 0 62px; } .main_video_box video {width:100%; } #sliderTextBanner { position: relative; /*margin-top:-5px*/} #sliderTextBanner .MS-content { margin:0; overflow: hidden; white-space: nowrap; background-color: #ebf9ca; padding: 10px 0; border-top: 1px solid #000;border-bottom: 1px solid #000;} #sliderTextBanner .MS-content .item { display: inline-block; height: 100%; overflow: hidden; position: relative; width: auto; vertical-align: top; padding: 0 10px;} #sliderTextBanner .MS-content .item a { color:#000; display: inline-block; vertical-align: middle; margin: 0; font-size: 16px; font-weight: 500; margin-right:80px} #sliderImgBanner { position: relative;} #sliderImgBanner .swiper-wrapper { transition-timing-function: linear;} #visualPromotion .swiper_tab_box {position:fixed;top:64px;left:0;width:100%;z-index:10;display:flex;justify-content: space-between; padding:0 4%; margin:0; transition: top 0.3s ease;} #visualPromotion .swiper_tab_box a {color:#fff;font-size:16px;font-weight:500;margin: 0;padding: 0; background: transparent;} #visualPromotion .swiper_tab_box a.swiper-pagination-bullet-active:after {background: #fff;height: 1px;} #visualPromotion .visualPromotionSwiper .swiper-slide {padding:0} #visualPromotion .visualPromotionSwiper .swiper-slide a {display:block;width: 100%;line-height: 1; font-size:0; position:relative; } #visualPromotion .visualPromotionSwiper .swiper-slide a .img img {width:100%; } #visualPromotion .visualPromotionSwiper .swiper-slide a .txt {width:100%; } #visualPromotion .visualPromotionSwiper .swiper-slide a .txt {position:absolute;top:0;left:0;width:100%;display: flex;height:100%;align-items: flex-start;justify-content: flex-end;flex-direction: column; box-sizing:border-box; padding:0 40px 70px} #visualPromotion .visualPromotionSwiper .swiper-slide a .txt .tt {line-height:1.5; color:#fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 400px; max-height: 84px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; font-size: 32px; font-weight: 600;} #visualPromotion .visualPromotionSwiper .swiper-slide a .txt .des {color:#fff;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-width: 400px;max-height: 46px;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;font-size:17px;line-height: 1.5;} #visualPromotion .visualPromotionSwiper .swiper-pagination {bottom: 18px !important;width:100% !important;display:flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding-left: 1%;} #visualPromotion .visualPromotionSwiper .swiper-pagination-bullet{cursor: pointer;height:2px !important;border-radius:0;opacity:1;background:#F4F4D6;margin:0 !important;width: 100%;transition: all ease 0.5s;} #visualPromotion .visualPromotionSwiper .swiper-pagination-bullet-active{background:#C1AC8A !important;width: 100%;} #visualPromotion .visualPromotionSwiper .swiper-button-prev, #visualPromotion .visualPromotionSwiper .swiper-button-next {position: fixed;top:calc(50vh - 6px);width: 32px;height: 32px;background-repeat: no-repeat;background-position: center;color: transparent;font-size: 0;} #visualPromotion .visualPromotionSwiper .swiper-button-prev:after, #visualPromotion .visualPromotionSwiper .swiper-button-next:after {display:none;} #visualPromotion .visualPromotionSwiper .swiper-button-next {right: 4%; background-image: url(/design/ranson01/images/slide_next_wh_25x48.png);} #visualPromotion .visualPromotionSwiper .swiper-button-prev {left: 4%; background-image: url(/design/ranson01/images/slide_prev_wh_25x48.png); display:none; } #visualPromotion.on .swiper_tab_box {top:24px} #visualPromotion.slideDown .swiper_tab_box {top:64px} #visualPromotion.remove .swiper_tab_box, #visualPromotion.removeButton .swiper-button-prev, #visualPromotion.removeButton .swiper-button-next {display:none; } /*콜렉션 영역*/ .collection {background:#f6f6f6; padding-top:10px} .collection .swiper-container{height:500px;background-color:#e1e1e1;} .collection .swiper-slide .spring{ height:80%;} .collection .CollSwiper {overflow:hidden; padding-left:10px; padding-right:10px; } .collection .imagePadWrap {display:inline-block;width:45%; float:none;padding-bottom:58.3%; } .collection .lace{display:inline-block;width:calc(100% - 45%);font-size:12px;font-weight:500;line-height:16px;color:#000;box-sizing: border-box;padding-left: 4%;} .collection .lace span {display:block; } .collection .sense{font-size:13px; margin-top:3%;margin-bottom:5%;} .collection .closet{font-size:12px; color:#000; font-weight:700} .collection .salewrap {display:inline-block;} .collection .salewrap div {display:inline-block; margin-right:5px;} .collection .saleprice { color:#aeaeae; } .collection .salepercent { color:#ff6b13; font-weight:bold;} .collection .prod_list {margin:20px 0 60px 0;} .collection li {display:block; width:100%; padding-bottom:0px !important;margin:3% 0; } .collection li a {display: flex;width:100%;height:100%;font-size: 0;align-items: center;} .collection li p {display:inline-block; font-size:11px;} .collection .swiper-slide {width:85% } .collection .swiper-slide ul {padding:0; } .collection .swiper-slide h2 {font-size:18px; color:#000; text-align:left; font-weight:bold; margin-top:20px; } .collection .swiper-slide p {font-size:15px; color:#000; text-align:left; margin:10px 0 0 0;} .collection .swiper-slide p.tt {font-size:12px; width:100%; font-weight: 400; margin:0; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; } .collection .swiper-slide .col-main {padding-bottom:67%; position:relative; display:block;} .collection .swiper-slide .col-main img { position:absolute; top:0; left:0;} .collection li.madeProduct .imagePadWrap {position:relative} .collection li.madeProduct .imagePadWrap:after { content: ''; background: url(/design/ranson01/images/icon_rr.png)no-repeat center; width: 23px; height: 22px; position: absolute; top: 10px; left: 10px; background-size: 100%; opacity:1; } /* 메인 알림 팝업(뉴 하단타입) */ .mainPopupLayer { display:none; position:fixed; bottom:0; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; z-index:1000 } .mainPopupLayer img{width:100%;} .mainPopupLayer .mainPopupBtn { text-align:center; background:#fff;} .mainPopupLayer .mainPopupBtn:after{content:""; clear:both; display:block;} .mainPopupLayer .mainPopupBtn .btn_close { margin-right:15px; height:40px; font-size:14px; font-weight:700; color:#949494; line-height:40px; float:right;} .mainPopupLayer .mainPopupBtn .btnTodayClose {padding-left:15px; font-size:14px; color:#949494; line-height:40px; float:left; } .mainPopupLayer .mainPopupBtn .btnTodayClose input { background-color: #ddd; border-left-color: rgba(221, 221, 221, 0.1); border-right-color: rgba(221, 221, 221, 0.1); background-size: 70%; background-position: center; background-repeat: no-repeat; border: none; border-radius: 18px; margin-right:3px; -webkit-appearance: none; -webkit-border-radius: 0; } .mainPopupLayer .mainPopupBtn .btnTodayClose input[type="checkbox"] { width:17px; height:17px; margin:0 6px 1px 0; background-image:url(//roompacker.cdn.smart-img.com/html/phps/m/common_new/check_input.png); -webkit-appearance:button; background-size: 70% !important; background-position: center !important; background-repeat: no-repeat !important; border: none !important; border-radius: 38px !important; -webkit-appearance: none; outline:0; } .mainPopupLayer .mainPopupBtn .btnTodayClose input[type="checkbox"]:checked { background-image:url(//roompacker.cdn.smart-img.com/html/phps/m/common_new/check_input.png) !important; background-color:#8b8b8b; !important; } .mainPopupLayer .popVisur-pagination {position:absolute; top:0; right:0; padding:8px 10px; color:#fff; background:rgba(0,0,0,.16); z-index:10; width:auto!important; left:unset; bottom:unset;} .salePercent {margin-left:0; margin-right:3px;font-size:11px; } /* 메인 알림 팝업(뉴 하단타입) */ .mainPopupLayer { display:none; position:fixed; bottom:0; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; z-index:1000 } .mainPopupLayer img{width:100%;} .mainPopupLayer .mainPopupBtn { text-align:center; background:#fff;} .mainPopupLayer .mainPopupBtn:after{content:""; clear:both; display:block;} .mainPopupLayer .mainPopupBtn .btn_close { margin-right:15px; height:40px; font-size:14px; font-weight:700; color:#949494; line-height:40px; float:right;} .mainPopupLayer .mainPopupBtn .btnTodayClose {padding-left:15px; font-size:14px; color:#949494; line-height:40px; float:left; } .mainPopupLayer .mainPopupBtn .btnTodayClose input { background-color: #ddd; border-left-color: rgba(221, 221, 221, 0.1); border-right-color: rgba(221, 221, 221, 0.1); background-size: 70%; background-position: center; background-repeat: no-repeat; border: none; border-radius: 18px; margin-right:3px; -webkit-appearance: none; -webkit-border-radius: 0; } .mainPopupLayer .mainPopupBtn .btnTodayClose input[type="checkbox"] { width:17px; height:17px; margin:0 6px 1px 0; background-image:url(//roompacker.cdn.smart-img.com/html/phps/m/common_new/check_input.png); -webkit-appearance:button; background-size: 70% !important; background-position: center !important; background-repeat: no-repeat !important; border: none !important; border-radius: 38px !important; -webkit-appearance: none; outline:0; } .mainPopupLayer .mainPopupBtn .btnTodayClose input[type="checkbox"]:checked { background-image:url(//roompacker.cdn.smart-img.com/html/phps/m/common_new/check_input.png) !important; background-color:#8b8b8b; !important; } .mainPopupLayer .popVisur-pagination {position:absolute; top:0; right:0; padding:8px 10px; color:#fff; background:rgba(0,0,0,.16); z-index:10; width:auto!important; left:unset; bottom:unset;} .moreBtn {margin:20px 0 50px;} .moreBtn a {display:flex;align-items:center;justify-content: space-around;width: calc(100% - 40px);height: 36px;border-radius:8px;background:#fff;border:1px solid #000;color:#000;font-size: 16px;margin:0 auto;} .CODI{padding:0 2px 30px !important;} .CODI li{padding-bottom:0px !important;} .CODI li a{padding: 2px; padding-bottom: 129.2%!important;} .CODI .list_shoppingInfo {display:none !important} #category_best .planTxArea {margin: 30px 0 10px;} #codi_item .planTxArea {margin: 20px 0 10px;} .swiper_tab_box {padding:0 20px; box-sizing:border-box; text-align: center; margin-bottom: 30px;} .swiper_tab_con {text-align:center;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgb(233, 233, 233);margin: 0 0 24px;} .swiper_tab_box .swiper_tab {line-height: 20px;min-height: 20px;color: #999;font-size: 13px;padding: 0 1px;margin: 0 8px 5px 0;position:relative;} .swiper_tab_box .swiper_tab:last-child {margin-right:0} .swiper_tab_box .swiper-slide.active .swiper_tab {background:none;color:#000;font-weight: 500;} .swiper_tab_box .swiper-pagination-bullet-active:after, .swiper_tab_box .active:after {content:"";display:inline-block;width:100%;height: 2px;background:#000;position:absolute;bottom: -5px;left:0} .swiper_tab_con .swiper-slide {width:auto !important; position:relative; margin-bottom:5px; } .swiper_tab_con_box {width:100%; text-align:left; } .swiper_tab_con_box .swiper-slide {font-size:0;box-sizing: border-box;padding:0 4px 0 5px;} .swiper_tab_con_box .swiper-slide-active {} .swiper_tab_con_box .item {display:inline-block; width:calc(25% - 4px); margin-right:5px; margin-bottom:4px; vertical-align:top; } .swiper_tab_con_box .item:nth-child(4n) {margin-right:0} .swiper_tab_con_box .item a {display:inline-block; width:100%; height:100%; position:relative; background:#f1f2f3;} .swiper_tab_con_box .item a {padding-top: 129.2%;} .swiper_tab_con_box .item a img {position:absolute; top:0; left:0; width:100%;} .swiper_tab_con_box .item a:hover .item_txt {opacity:1} .swiper_tab_con_box .item .item_txt {display:none !important; /*display: flex*/; position:absolute; left:0;top:0;width:100%;height:100%;align-items: center;justify-content: center;flex-direction: column; background:rgba(0,0,0,0.46);opacity:0; } .swiper_tab_con_box .item .item_txt .name { color:#fff; font-size:13px; font-weight:300; margin-bottom:10px } .swiper_tab_con_box .item .item_txt .price {color:#fff; font-size:14px; font-weight:700 } .contain .swiper-button-next, .contain .swiper-button-prev {top: calc(50% - -46px);background: url(//roompacker.cdn.smart-img.com/html/snap/pc/images/main_new/mainBnArrow.png) center center no-repeat;width: 59px;height: 80px;} .contain .swiper-button-prev {left:0; background-position: 0px -0;} .contain .swiper-button-next { right:0; background-position: 17px -80px;} .swiper_tab_con_box .swiper-slide-active .item {display:inline-block; } .tab_content {display:block;padding-left:20px;box-sizing: border-box;} .tab_content.active {display:block;} .tab_content .swiper-slide { /*width: 67.201% !important;*/} #category_best {overflow:hidden;} #category_best {overflow:hidden;} #category_best .swiper_tab_box {padding:0; border:none; } #category_best .swiper_tab_box .swiper {padding:0 20px;position:relative;border: none;} #category_best .swiper_tab_box .swiper:after {content:""; display:inline-block; width:calc(100% - 40px); height:1px; background:rgb(233, 233, 233); position:absolute; left:20px; bottom:0} #category_best .items {margin-bottom:10px; position:relative;} #category_best .items .prd_link {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;} #category_best .items figure {display:table; table-layout:fixed; width:100%;} #category_best .items figure .listInfoTop, #category_best .items figure .list_shoppingInfo {display:table-cell;vertical-align: top;} #category_best .items figure .list_shoppingInfo {padding:0 10px;} #category_best .items figure .listInfoTop {/*width: 38.435%;*/width:82px;padding-left:25px;} #category_best .items figure .listInfoTop .rank {position:absolute; top:0; left:0; font-size:16px; font-weight:600; color:#000; font-style: italic;} #category_best .items figure .listPrice {font-size:14px; font-weight: bold; } #category_best .PHPS_pick_prdLink {padding-bottom:0!important;} #category_best .items figure .infoTop, #category_best .items figure .count_wrap {display:none !important; } #codi_item {overflow:hidden;} #codi_item .swiper_tab_box {padding:0; border:none; } #codi_item .swiper_tab_box .swiper {padding:0 20px;position:relative;border: none;} #codi_item .swiper_tab_box .swiper:after {content:""; display:inline-block; width:calc(100% - 40px); height:1px; background:rgb(233, 233, 233); position:absolute; left:20px; bottom:0} #codi_item .items {margin-bottom:10px; position:relative;} #codi_item .items .prd_link {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;} #codi_item .items figure {display:table; table-layout:fixed; width:100%;} #codi_item .items figure .listInfoTop, #codi_item .items figure .list_shoppingInfo {display:table-cell;vertical-align: top;} #codi_item .items figure .list_shoppingInfo {padding:0 10px;} #codi_item .items figure .listInfoTop {/*width: 38.435%;*/width:82px;padding-left:25px;} #codi_item .items figure .listInfoTop .rank {position:absolute; top:0; left:0; font-size:16px; font-weight:600; color:#000; font-style: italic;} #codi_item .items figure .listPrice {font-size:14px; font-weight: bold; } #codi_item .PHPS_pick_prdLink {padding-bottom:0!important;} #codi_item .items figure .infoTop, #codi_item .items figure .count_wrap {display:none !important; } #new_collection {} #new_collection .planTxArea .newTit {text-align:left; } #new_collection .new_collection_list {margin-bottom:40px} #new_collection .new_collection_list:last-child {margin-bottom:0} #new_collection .swiper-slide {margin:37px 0px 0px 15px;; width: 167px;} #new_collection .swiper-slide.imgs {margin:0px; width: 315px;} #new_collection .img_box {position:relative;} #new_collection .img_box a {display:inline-block; width:100%; height:100%; } #new_collection .img_box .img_img {position:relative} #new_collection .img_box .img_img:before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.2); z-index: 1;} #new_collection .img_txt {position:absolute;bottom:0;left:0;box-sizing:border-box;padding:16px;width: 100%;z-index: 2;} #new_collection .img_txt .img_dec {color: #ffffff;font-size: 13px; margin-bottom:10px;font-weight: 300; } #new_collection .img_txt .img_tt {color: #ffffff; font-size: 24px; line-height:1.2; font-weight: 300; margin-bottom:10px; } #new_collection .img_txt .img_hashtag span {display: none; margin-right: 4px; margin-bottom:4px; padding: 0px 10px; font-size: 11px; font-weight: 500; line-height: 25px; border-radius: 12.5px; background: rgba(255,255,255,.9); color:#000 } #new_collection .swiper-pagination_box {width:315px;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;padding: 15px 0 0 15px;} #new_collection .swiper-pagination_box .more {margin:0;height: 25px;width: 66px;color: #ffffff;font-size: 12px;border-radius: 12.5px;background: #C1AC8A;line-height: 23px;} #new_collection .swiper-pagination_box .swiper-pagination {position:static;width: calc(100% - 76px);box-sizing: border-box;margin-left: 10px; height:2px; background: #e5e5e5;} #new_collection .swiper-pagination_box .swiper-pagination-progressbar-fill {background:#C1AC8A} .prod_list li.w100 {width: calc(100% - 2%); box-sizing: border-box;} .areaFix {margin-top:0} .areaFix .planTxArea {margin-top:0} .areaFix .newTit {padding-top:0; margin-top:0} #top100 .swiper-slide {width:100%} #top100 .swiper-slide > li {display:inline-block; vertical-align:top; width:calc(33.33% - 5.5px); margin-right:5px; margin-bottom:20px; } #top100 .swiper-slide > li:nth-child(3n) { margin-right:0; } #top100 .swiper-slide > li:nth-last-child(-n+3) {margin-bottom:0} #top100 .swiper-slide > li .listName {margin-top:6px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} #top100 .swiper-slide > li .icons, #top100 .swiper-slide > li .listSubname, #top100 .swiper-slide > li .crema-show {display:none !important; } .swiper_list_two .swiper-slide {width:233px} .swiper_list_two .swiper-scrollbar-box { margin-top:24px; box-sizing:border-box; padding:0 calc(10% - 10px); z-index: 50; width:100%} .swiper_list_two .swiper-scrollbar {width:calc(100% - 20px)!important; height:2px !important; left:10px!important; border-radius:0; opacity:1; background:rgba(158, 158, 158, 0.5) } .swiper_list_two .swiper-scrollbar-drag {background:#C1AC8A; border-radius:0;} .newTit.top_margin {margin-top:36px;} /* BASIC css end */