/* BASIC css start */ /* */ #spm_popup_main{/* display: none !important; */ z-index: 99 !important;} #layoutDimmed{ position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; background:#000; opacity:0.3; filter:alpha(opacity=30); display:none; } #layoutDimmed.active{ display: block;} :is(#header_wrap, #aside) img{ width: 100%;} .menuPoint::after{ content: ""; clear: both; display: inline-block; margin: 0 0 8px 3px; width: 5px; height: 5px; background: #CF1B7C; border-radius: 50%;} /* 띠배너 */ .topBanner{width:100%; height: 30px;} .topBanner .swiper-slide{ width: 100%;} .topBanner .swiper-slide a{ display: block; width: 100%; text-align: center; height: 100%; line-height: 29px; font-size: 14px;} .topBanner .swiper-slide a span{} /* 헤더 */ #header_wrap{position: sticky; top: 0; left: 0; z-index: 98; background: white; color: #373737;} .header_container{ position:relative; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; height: 52px; background: white;} .header_container .fixed_logo{ width: 120px;} .header_container :is(.util, .aside_open){ width: 20%;} #header_wrap .header_container :is(.aside_open img, .btn_search, .basket){ width: 20px;} .header_container .util{ display: flex; align-items: center; justify-content: flex-end;} .header_container .basket{margin-left: 9px; position: relative;} .header_container .basket p{ position: absolute; right: -16%; top: 0; background: #000; color: white; text-align: center; width: 12px; height: 12px; border-radius: 50px; font-size: 10px;} .gnb_wrap { height: 48px; background: white; z-index:-1; transition: .3s; border-bottom: .5px solid #D9D9D9; } .gnb_wrap ul{ height:47.5px;} .gnb_wrap ul li.swiper-slide{display: inline-block; width: auto;} .gnb_wrap ul li a{ width:100%; height:100%; display:flex; justify-content: center; flex-direction:column; padding: 0 0.5rem; font-size: 1.05rem; font-weight: 500;} .gnb_wrap ul li:first-child a{ padding: 0 0.5rem 0 0} .gnb_wrap ul li:first-of-type{ margin-left: 1rem;} .gnb_wrap ul li:last-of-type{ margin-right: 1rem;} #search_box{ padding: 1rem; border-bottom: 6px solid #F6F6F6; display:none;} #search_box.active{display:block;} #search_box .search_place{ display: flex; background: #F6F6F6; justify-content: space-between; align-items: center; height: 45px; border-radius: 5px; padding: 0 10px;} #search_box .search_place form{ width: 100%;} #search_box .search_place input[type="text"]{ background: unset; border: unset; width: 94%; padding-left: 10px; margin: 0 10px 0 10px; font-size: 14px; color: #373737;} #search_box .search_place input[type="text"]::placeholder{ color: #d9d9d9;} #search_box .search_place .btn_search.view{ width: 23px;} #search_box .search_place .btn_search.close{ width: 16px;} #search_box .searches{} #search_box .searches a{ display: inline-block; padding: 8px 12px; border: 1px solid #d9d9d9; font-size: 12px; border-radius: 50px; margin: 12px 8px 0 0; } #search_box .searches a.best{ border: 1px solid #000;} /* 햄버거 */ #aside{ position:fixed; left:-100%; top:0px; bottom:0; width: 100vw; height: 100vh; background: #fff; transition:500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); padding: 1rem 0; -ms-overflow-style: none; scrollbar-width: none; z-index: 1001; overflow-y: auto; } #aside.active{ left:0%;} #aside .aside_close{ display: inline-block; float: right; width: 18px; margin-right: 1rem;} #aside div[class*="memberInfo_log"]{ margin: 56px 0 0; border-bottom: 6px solid #f6f6f6; padding: 0 1rem;} #aside .memberInfo_logoff > div{ font-size: 20px; line-height: 1.5;} #aside .memberInfo_logoff > p{ width: 100%; border: 1px solid #000; font-size: 16px; text-align: center; margin: 20px 0 32px; border-radius: 5px;} #aside .memberInfo_logoff > p a{ display: block; width: 100%; padding: 14px;} #aside .memberInfo_logon :is(.mypoint, .mywish, .mycoupon, .mylevel) img{ width: 19px;} #aside .memberInfo_logon > .user_info { font-size: 22px; font-weight: 500; display: flex; align-items: baseline; } #aside .memberInfo_logon > .user_info span{ font-weight: 400; } #aside .memberInfo_logon > .user_info a{ font-weight: 400; color: #6f6f6f; font-size: 13px; padding: 0 0 0 12px; line-height: 1;} #aside .memberInfo_logon .mycoupon a .cont b{ color: #CF1B7C; font-size: 18px; padding-right: 3px;} #aside .memberInfo_logon > ul { padding: 24px 6px;} #aside .memberInfo_logon .user_info + ul{border-bottom: 0.5px solid #d9d9d9;} #aside .memberInfo_logon > ul li{ margin-bottom: 16px;} #aside .memberInfo_logon > ul li:last-child{ margin-bottom: 0;} #aside .memberInfo_logon > ul li a{ display: flex; justify-content: space-between; align-items: center;} #aside .memberInfo_logon > ul li .tit{ display: flex; justify-content: flex-start; align-items: center;} #aside .memberInfo_logon > ul li .tit span{ font-size: 15px; color: #6F6F6F; padding-left: 12px;} #aside .memberInfo_logon > ul li .cont{ font-size: 15px; color: #373737;} #aside .memberInfo_logon > ul li .cont b{ font-size: 18px; padding-right: 3px;} #aside .cate_list{} #aside .cate_list .slide_tit{ padding: 1rem;} #aside .cate_list .slide_tit li.swiper-slide{display: inline-block; width: auto; margin: 0 7px; position: relative;} #aside .cate_list .slide_tit li.swiper-slide:first-child{ margin-left: 0;} #aside .cate_list .slide_tit li span{ display: block; text-align: center; margin-top: 17px; font-size: 15px;} #aside .cate_list .slide_tit li img{width: 19vw; display: block; border-radius: 100px; margin: 0 auto;} #aside .cate_list .slide_tit li.swiper-slide.on::after{ display: block; content: ""; clear: both; position: absolute; left: -8%; top: -6%; border-radius: 50%; border: 1px solid #cf1b7c; width: calc(19vw + 16%); height: calc(19vw + 12%); box-sizing: border-box; } #aside .cate_list .slide_cont{ padding: 1rem 0 1.5rem ; margin: 0 1.5rem 0; border-top: 1px solid #d9d9d9;} #aside .cate_list .slide_cont a{ font-size: 16px; display: block; padding: 12px 0;} #aside .cate_list .slide_cont :is(li.depth1,li.depth3 > ul) { display: none;} #aside .cate_list .slide_cont :is(li.depth1.on,li.depth3.on > ul){ display: block;} #aside .cate_list .slide_cont :is(.depth1 > a, .depth2 > li > a){ font-weight: 500; font-size: 16px;} #aside .cate_list .slide_cont li.depth1 > a{ font-weight: 500;} #aside .cate_list .slide_cont :is(ul.depth2, li.depth3 > ul){ margin-left: 0.5rem;} #aside .cate_list .slide_cont li.depth3 > a{ position: relative; } #aside .cate_list .slide_cont li.depth3 > a::before{display: inline-block; content: ""; clear: both; background-image: url('/design/aaron/ECHO/ui%20icon/arrow_right.svg'); background-position: center; background-repeat: no-repeat; background-size: auto 0.8em; width: 1.5rem; height: 1rem; align-self: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); } #aside .cate_list .slide_cont li.depth3 > ul a{ color: #6f6f6f;} #aside .official_event{ padding: 1.5rem 1rem 0; border-top: 6px solid #F6F6F6;} #aside .official_event > h2{ font-size: 18px; padding-bottom: 1.6rem; font-weight: 400;} #aside .official_event > h2 a{ float: right; font-size: 22px;} #aside .official_event ul.cont{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;} #aside .official_event ul.cont > li{ width: 48%;} #aside .official_event ul.cont > li a{ display: block; padding: 0 0 20px; position: relative;} #aside .official_event ul.cont > li a h3{ font-size: 14px; padding: 12px 0 4px;} #aside .official_event ul.cont > li a p{ font-size: 13px; color: #6f6f6f;} #aside .c_service { padding: 0 1rem;} #aside .c_service .depth1 > a{ font-size: 18px; font-weight: 400; padding: 12px 0; display: block; width: 100%; position: relative;} #aside .c_service .depth1 ul{ margin-left: 0.5rem; display: none;} #aside .c_service .depth1.on ul{ display: block;} #aside .c_service .depth1 ul li a{ font-size: 16px; display: block; padding: 12px 0; color: #6f6f6f;} #aside .member_logout{ text-align: right; padding: 2.1rem 1rem;} #aside .member_logout a{ display: inline-block; border: 1px solid #D9D9D9; padding: 8px 12px; font-size: 12px; color: #6F6F6F; border-radius: 5px;} /* 화살표 모음 */ #aside .cate_list .slide_cont li.depth3 > a::before, #aside .c_service .depth1 > a::before{display: inline-block; content: ""; clear: both; background-image: url('/design/aaron/ECHO/ui%20icon/arrow_right.svg'); background-position: center; background-repeat: no-repeat; background-size: auto 0.8em; width: 1.5rem; height: 1rem; align-self: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); } #aside .cate_list .slide_cont li.depth3.on > a::before, #aside .c_service .depth1.on > a::before{ transform: translateY(-50%) rotate(270deg); } #aside .c_service .depth1.brandstory > a::before{ transform: translateY(-50%) rotate(0); } /* 그리드 스타일 공통 */ #MS_product .SMS_Product_display .MK-product-icons{width: auto;} #MS_product .SMS_Product_display .MK-product-icons img{ width: auto; margin:0; padding:0} .listTitle{ font-size: 20px; font-weight: 500;} .listArrow{ display: inline-block; width: 12px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} #MS_product .SMS_Product_display .prd-info li{ margin-bottom: 4px;} #MS_product .SMS_Product_display .prd-info .etc{ font-size: 13px; color: #6f6f6f; margin-bottom: 3px;} #MS_product .SMS_Product_display .prd-info .prd-name{ font-size: 14px; font-weight: 500;} #MS_product .SMS_Product_display .prd-info .prd-price{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; font-size: 15px; font-weight: 500; margin: 4px 0 0; height: fit-content;} #MS_product .SMS_Product_display .prd-info .prd-price span{ display: inline-block; margin-right: 3px; } #MS_product .SMS_Product_display .prd-info .prd-price .c-price-sell span:not(.price){ color: #CF1B7C; } #MS_product .SMS_Product_display .prd-info .prd-price > span { margin-right: 0;} #MS_product .SMS_Product_display .prd-info .prd-price > span strike{ font-size: 12px; color: #C3C3C3; font-weight: 400;} #MS_product .SMS_Product_display .items{border-top:0; display: flex; flex-wrap: wrap; justify-content: space-between;} #MS_product .SMS_Product_display .items li.item-box{ width: 49%; margin-bottom: 12%; border-bottom: unset; border-right: unset; padding: 0;} #MS_product .SMS_Product_display .items li.item-box:nth-child(2n){padding-right: 0;} #MS_product .SMS_Product_display .items li.item-box .prd-info li{ width: 100%; border-right: unset; border-bottom: unset; padding: 0; text-align: left;} #MS_product .SMS_Product_display .items li.item-box .thumb{ } #MS_product .SMS_Product_display .items li.item-box .thumb a{ min-height: 58.5vw; display: flex; justify-content: center; align-items: center; position:relative;} #MS_product .SMS_Product_display .items li.item-box .thumb a .prd-ico{position:absolute; top:0; left:0;} #MS_product .SMS_Product_display .items li.item-box .thumb a .prd-ico img{display:block; height:21px;} #MS_product .SMS_Product_display .items li.item-box .prd-info{ position: relative; margin: 10px 10px 0;} #MS_product .SMS_Product_display .items li.item-box .prd-info .wish{ display:inline-flex; align-items: center;} #MS_product .SMS_Product_display .items li.item-box .prd-info > ul{ width: 100%; text-align: left;} #MS_product .SMS_Product_display .items li.item-box .prd-info .etc{ min-height: 19px; width: calc(100% - 25px);} #MS_product .SMS_Product_display .items li.item-box .prd-info .prd-price > span{ display: block; width: 100%;} #MS_product .SMS_Product_display .items li.item-box .icon-box{ display: flex; align-items: center; margin: 12px 0 0;} #MS_product .SMS_Product_display .items li.item-box .icon-box [class*="-count"]{padding-left: 5px; color: #6F6F6F; font-size: 11px;} #MS_product .SMS_Product_display .items li.item-box .wish{display: inline-block; float: right; font-size: 10px; color: #6F6F6F; text-align:center;} #MS_product .SMS_Product_display .items li.item-box .wish .my-wish-list{background-image:url(/design/aaron/ECHO/ui%20icon/heart.svg); display:inline-block; width:17px; height:17px; background-repeat:no-repeat; background-size:contain; background-position:center; margin:0 auto;} #MS_product .SMS_Product_display .items li.item-box .wish .my-wish-list.wish-on{background-image:url(/design/aaron/ECHO/ui%20icon/heart_full.svg);} #MS_product .SMS_Product_display .items li.item-box .heart{display: inline-flex; align-items: center;} #MS_product .SMS_Product_display .items li.item-box .heart img{ width: 12px;} #MS_product .SMS_Product_display .items li.item-box .review{ display: inline-flex; align-items: center; margin-left: 10%; line-height: 1; font-size: 11px; color: #6f6f6f;} #MS_product .SMS_Product_display .items li.item-box .review .review-count{ padding-left:3px; line-height: 1;} /* 그리드 스타일 공통 */ .layer_smartmypage_sys { z-index: 1001; position: absolute; top: 40px; left: 10px; right: 10px; background: #fff; } .layer_smartmypage_sys .fc_red { color: #eb2539; } .layer_smartmypage_sys .fc_blue { color: #2e84f0; } .layer_smartmypage_sys select { width: 100%; height: 35px; line-height: 35px; padding: 0; background: #fbfbfb; border: 1px solid #c6c6c6; box-sizing: border-box; border-radius: 0; } .layer_smartmypage_sys input[type=text] { width: 100%; height: 35px; line-height: 35px; padding: 0 5px; background: #fbfbfb; border: 1px solid #c6c6c6; box-sizing: border-box; border-radius: 0; } .layer_smartmypage_sys .btn_accept { display: inline-block; height: 36px; line-height: 36px; padding: 0 30px; background: #393939; color: #fff; font-weight: bold; letter-spacing: -1px; text-align: center; } .layer_smartmypage_sys .btn_cancel { display: inline-block; height: 36px; line-height: 36px; padding: 0 30px; background: #ccc; color: #3b3b3b; font-weight: bold; letter-spacing: -1px; text-align: center; } .layer_smartmypage_sys .lhd { position: relative; height: 36px; line-height: 36px; padding: 0 10px; background: #efefef; } .layer_smartmypage_sys .lhd h2 { margin: 0; padding: 0; font-size: 1em; } .layer_smartmypage_sys .lhd > a { position: absolute; top: 0; right: 0; width: 36px; height: 36px; background: #4f4f4f url(/images/d3/m_01/btn/h18_close@2x.png) no-repeat 50% 50%; text-indent: -9999px; } .layer_smartmypage_sys .lcont { padding: 0 10px 20px; } .layer_smartmypage_sys .lcont .smart_m_b_5 { margin-bottom: 5px; } .layer_smartmypage_sys h3 { margin-top: 20px; padding-left: 12px; color: #4c4c4c; font-size: 1.125em; font-weight: bold; letter-spacing: -1px; background: url(/images/d3/m_01/bull/bull_community_list@2x.gif) no-repeat 0 50%; background-size: 8px auto; } .layer_smartmypage_sys .tbl { margin-top: 5px; } .layer_smartmypage_sys .tbl table { width: 100%; table-layout: fixed; word-break: break-all; } .layer_smartmypage_sys .tbl th, .layer_smartmypage_sys .tbl td { padding: 12px 10px; border: 1px solid #d5d5d5; font-size: .938em; } .layer_smartmypage_sys .tbl th { background: #f1f1f1; text-align: left; white-space: nowrap; } .layer_smartmypage_sys .tbl .number { color: #f1191f; font-size: 1.125em; } .layer_smartmypage_sys .tbl .item_info { position: relative; padding-left: 95px; } .layer_smartmypage_sys .tbl .item_info .thumb { position: absolute; top: 0; left: 0; } .layer_smartmypage_sys .tbl .item_info .thumb img { width: 85px; height: 85px; } .layer_smartmypage_sys .tbl .item_info ul { min-height: 85px; } .layer_smartmypage_sys .tbl .item_info li { list-style: none; } .layer_smartmypage_sys .tbl .item_info li.tit { font-size: 1.125em; font-weight: bold; letter-spacing: -1px; word-break: break-all; } .layer_smartmypage_sys .tbl .amount { position: relative; padding-right: 80px; } .layer_smartmypage_sys .tbl .amount input[type=text] { text-align: center; } .layer_smartmypage_sys .tbl .amount .btn_plus, .layer_smartmypage_sys .tbl .amount .btn_minus { position: absolute; top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: #858585; color: #fff; font-size: 2em; text-align: center; } .layer_smartmypage_sys .tbl .amount .btn_plus { right: 40px; } .layer_smartmypage_sys .tbl .search { overflow: hidden; } .layer_smartmypage_sys .tbl .search select, .layer_smartmypage_sys .tbl .search input[type=text] { float: left; width: 49%; } .layer_smartmypage_sys .tbl .search input[type=text] { float: right; } .layer_smartmypage_sys .tbl .search .btn_search { display: inline-block; margin-top: 5px; width: 100%; height: 35px; line-height: 35px; background: #858585; color: #fff; font-size: 1.125em; text-align: center; } .layer_smartmypage_sys .tbl .opt { overflow: hidden; } .layer_smartmypage_sys .tbl .opt span { float: left; width: 25%; line-height: 35px; } .layer_smartmypage_sys .tbl .opt select { width: 75%; } .layer_smartmypage_sys .tbl .opt .tb-opt select { float: none; } .layer_smartmypage_sys .tbl .opt ul.select-list li { margin-bottom: 5px; } .layer_smartmypage_sys .tbl .opt ul.select-list li span { float: none; width: auto; } .layer_smartmypage_sys .tbl .txt_area { margin-top: 0; } .layer_smartmypage_sys .tbl .txt_right { text-align: right; } .layer_smartmypage_sys .tbl .cannot-selected, .layer_smartmypage_sys .tbl .cannot-selected-l { border: 0; height: 15px; text-align: right; width: 85%; line-height: 120%; background-color: #fff; } .layer_smartmypage_sys .tbl .sys_normal { white-space: normal; } .layer_smartmypage_sys .tbl .MS_diy_option_width, .layer_smartmypage_sys .tbl .MS_diy_option_height { width: 70%; } .layer_smartmypage_sys .lst { margin-top: 5px; } .layer_smartmypage_sys .lst li { list-style: none; padding-left: 8px; background: url(/images/d3/m_01/bull/keywords_li@2x.gif) no-repeat 0 7px; letter-spacing: -1px; } .layer_smartmypage_sys .txt_area { margin-top: 5px; padding: 10px; border: 1px solid #d5d5d5; background: #fbfbfb; } .layer_smartmypage_sys .txt_area textarea { width: 100%; height: 100px; padding: 0; border: 0; background: #fbfbfb; } .layer_smartmypage_sys .btns { overflow: hidden; margin-top: 20px; } .layer_smartmypage_sys .btns .btn_accept { float: left; width: 68%; padding: 0; } .layer_smartmypage_sys .btns .btn_cancel { float: right; width: 30%; padding: 0; } .SMS_Topmodule_01 .container_Box ul li .joinAnimation {background:#ffd807; width:90px; left:28%;} #SMS_oneSlideBanner .SMS_fixed_inner .right_p01{background: url(/design/aaron/smartskin/custom/img/cartIcon.png) no-repeat center; background-size: 70%;} #SMS_oneSlideBanner .SMS_fixed_inner .right_p01 a{display:block; width:100%; height:100%;} #SMS_fixed_warp .SMS_fixed_inner .right_p02{background: url(/design/aaron/smartskin/custom/img/cartIcon.png) no-repeat center; background-size: 70%;} #SMS_fixed_warp .SMS_fixed_inner .small_icon.right_p02 a{display:block; width:100%; height:100%;} #SMS_fixed_warp .SMS_fixed_inner .small_icon.right_p02 p{position: absolute; display: inline-block; min-width: 17px !important; height: 17px !important; line-height: 17px; top: 5px; left: 50%; color: #fff; font-size: 8px; font-weight: bold; text-align: center; border-radius: 18px; background: #282828; margin-left: 2px; z-index: 101;} .SMS_top_main_gallery .swiper-pagination .swiper-pagination-bullet-active{background:#000;} #SMS_fixed_top{top:0px !important;} #plusfriend-chat-button{ position: fixed; right: 0.4rem; bottom: calc(6% + 58px); z-index: 999; width: 44px; height: 44px; } #plusfriend-chat-button a {display:block;width:44px;height:44px;background:url('/design/aaron/ECHO/ui%20icon/kakao.svg') left top no-repeat;background-size:44px; } #plusfriend-chat-button a:nth-child(even) { display:none } #plusfriend-chat-button img { display:none;} .topSlider{transform:none !important;} .SMS_recentIconInbody .SMS_recentIcon {bottom:132px !important; } .SMS_recentIconInbody ul { bottom:74px;} .SMS_TopBtn.goto_top{bottom: 6%; right: 0.4rem; width: 44px; height: auto; border: unset; background: unset; border-radius: 50%;} .SMS_TopBtn.goto_top::before{ display: none;} .SMS_TopBtn.goto_top img{ width: 100%;} .viewProdBtn{position: fixed; bottom: calc(6% + 116px); right: 0.4rem; z-index: 9; width:44px;} .viewProdBtn > img{position:relative; z-index:99; width: 100%;} .viewProdBtn #MS_view_product{display:none;} .viewProdBtn.on #MS_view_product{display:block; position:fixed; bottom:calc(6% + 113px); right:calc(0.4rem - 3px); padding-bottom:44px; width:50px; height:100px; background:rgba(0,0,0,0.1); border-radius:3px; box-sizing: content-box;} .viewProdBtn.on #MS_view_product ul{width:44px; margin:0 auto; padding-top:3px;} .viewProdBtn.on #MS_view_product ul li{width:100%; padding-bottom:3px;} .viewProdBtn.on #MS_view_product ul li a{display:block;} .viewProdBtn.on #MS_view_product ul li a img{width:100%;} /* BASIC css end */