/* BASIC css start */ #contentWrap {padding-top:130px !important;} .loc-navi, .loc-navi a {font-size:1rem;} .loc-navi a:last-child {font-weight:500;} /* class-list */ #productClass {padding-bottom:130px; max-width:1600px; margin:0 auto;} #productClass .cate-wrap {overflow:hidden;text-align: center;margin-bottom:70px;} #productClass .cate-wrap .bcate {margin:70px 0 50px;font-size: 2.5rem;color:#202020; font-family: 'FlightSans-Bold', sans-serif;} #productClass .cate-wrap .class-list{} #productClass .cate-wrap .class-list ul { *zoom:1;display: flex;flex-wrap: wrap;text-align: center;justify-content: center;align-items: center;} #productClass .cate-wrap .class-list ul:after { display:block; clear:both; content:'' } #productClass .cate-wrap .class-list ul li {padding: 0 7px 7px;} #productClass .cate-wrap .class-list ul li a {display:block; font-size:0.875rem; color: #777; padding: 12px 30px;box-sizing: border-box; border-radius: 50px;border: 1px solid #bbb !important; font-family: 'FlightSans-Regular', sans-serif;} #productClass .cate-wrap .class-list ul li.on a{ border: 1px solid #011222 !important; color: #fff !important; } #productClass .cate-wrap .class-list ul li.on a::after { opacity:1 !important; width: 120% !important; } /* 메인 첫번째 영역 css */ .area1_wrap {width: 100vw;box-sizing: border-box;overflow: hidden;margin-bottom: 90px;margin-left: calc(-50vw + 50%);margin-right: calc(-50vw + 50%);background: transparent;padding: 0;} .area1_wrap .swiper-container {padding-bottom: 73px;} .area1_wrap .prd-info {display:none;position: absolute;left: 0;right: 0;bottom: 0;background: rgba(255,255,255,0.5);padding: 28px 30px !important;box-sizing: border-box;cursor: pointer;} #area1_wrap_swiper .swiper-pagination {bottom: 0;text-align:center;color: #ccc;font-size:18px;display: flex;justify-content: center;align-items: center;} #area1_wrap_swiper .swiper-pagination-bullet {width: 6px;height: 6px;opacity:1 !important;background: #ccc;margin:0 6px !important;position:relative;box-sizing:border-box;border-radius: 5px;} #area1_wrap_swiper .swiper-pagination-bullet-active {background: rgb(43, 46, 67) !important;width: 12px;height: 12px;} /* 상품 리스트 공통 */ #list2_wrap { margin-bottom:95px; } #list2_wrap.item-wrap .item-cont .item-list { width: 49%; margin-right: 2%; } #list2_wrap.item-wrap .item-cont .item-list:nth-child(2n) { margin-right: 0; } #list3_wrap {margin-bottom:95px;width: 100%;max-width: 1800px;margin: 0 auto 40px;padding: 0;} #list3_wrap.item-wrap .item-cont .item-list { width: 23%; margin-right: 2%; } #list3_wrap.item-wrap .item-cont .item-list:nth-child(4n) { margin-right: 0; } .none-data {text-align: center;margin: 100px 0; font-size:20px} .none-data i{margin-bottom:20px} /* 타이틀 */ .cateTit { position:relative; text-align:center } .cateTit h3 { font-size: 40px; color: #000; font-weight:bold; font-family: "SCDream",sans-serif; line-height: 1; margin-bottom: 117px; } .cateTit .line { margin:20px auto; width:10px; height:2px; background:#1c1c1c } /* 타이틀 - 회원가입 등의 페이지 */ .cateTit_v2 { *zoom:1 } .cateTit_v2:after { content:""; display:block; clear:both; } .cateTit_v2 .right { float:right; } .cateTit_v2 .title { font-size:18px; line-height:1; font-weight:bold; display:inline-block; *float:left; *line-height:20px } .cateTit_v2 .subTxt { font-size:12px; line-height:1.5; } .cateTit_v2.join { margin:88px 0 20px; padding:14px 0; border-bottom:1px solid #000; color:#000; } /* 상품 리스트 공통 */ #list2_wrap { margin-bottom:95px; } #list2_wrap.item-wrap .item-cont .item-list { width: 49%; margin-right: 2%; } #list2_wrap.item-wrap .item-cont .item-list:nth-child(2n) { margin-right: 0; } #list3_wrap { margin-bottom:95px; } #list3_wrap.item-wrap .item-cont .item-list { width: 23%; margin-right: 2%; } #list3_wrap.item-wrap .item-cont .item-list:nth-child(4n) { margin-right: 0; } #list4_wrap {} #list4_wrap.item-wrap .item-cont .item-list { width: 23.5%; } #list4_wrap.item-wrap .item-cont .item-list:nth-child(4n) { margin-right: 0; } .item-wrap { overflow: hidden; width:100%; margin: 0 auto; } /* 분류페이지 총상품수, 검색정렬 */ .item-wrap .item-info {display:flex;color:#888;justify-content: space-between;align-items: center; width: 100%;max-width: 1800px;margin: 0 auto 30px;} .item-wrap .item-info .all_cnt { font-size:1.125rem; color:#161616; font-family: 'FlightSans-Regular', sans-serif;} .item-wrap .item-info .all_cnt b { color:#161616; font-size:1.5rem; font-family: 'FlightSans-Bold', sans-serif;} .item-wrap .item-order dd ul { display: flex; } .item-wrap .item-order dd ul li { } .item-wrap .item-order dd ul li:after {height:15px !important;} .item-wrap .item-order dd ul li a {font-size: 1rem; color: #999; padding:0 10px; position:relative; font-family: 'FlightSans-Regular', sans-serif;} .item-wrap .item-order dd ul li a:hover{color:#333; font-family: 'FlightSans-Bold', sans-serif;} .item-wrap .item-order dd ul li a span.on { color:#333; font-family: 'FlightSans-Bold', sans-serif;} .item-wrap .item-cont.flexed { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; } .item-wrap .item-cont .item-list { } .item-wrap .item-cont .item-list .thumb { width: 100%; overflow:hidden; position: relative; } .item-wrap .item-cont .item-list .thumb .dc_per { position: absolute; top: 18px; right: 18px; background: #011222; width: 60px; height: 60px; text-align: center; line-height: 60px; font-size: 22px; font-weight: bold; color: #fff; border-radius: 100px; font-family: 'Montserrat', sans-serif; } .item-wrap .item-cont .item-list .thumb img { width: 100%; } .item-wrap .item-cont .item-list .prd-info { padding: 15px 2px 83px 1px; text-align: left; } .item-wrap .item-cont .item-list .prd-info.array_center { text-align:center; } .item-wrap .item-cont .item-list .prd-ico img { margin-right: 2px; } .item-wrap .item-cont .item-list .prd-brand { margin-bottom: 15px; font-size:0.875rem; color: #333; } .item-wrap .item-cont .item-list .prd-name { margin-bottom: 30px; height:auto;} .item-wrap .item-cont .item-list .prd-name a { display:block; color: #333; font-size: 1.125rem; line-height: 27px; text-overflow:ellipsis; word-wrap:normal; font-weight:500;} .item-wrap .item-cont .item-list .prd-price .replace { color: #ff0000; font-size: 22px; font-weight: bold; } .item-wrap .item-cont .item-list .prd-price .dc_per { color: #011222; margin-right: 9px; font-weight: bold; font-size: 22px; } .item-wrap .item-cont .item-list .prd-price .consumer { text-decoration: line-through; color: #bbb; font-weight: bold; font-size: 14px; margin-left: 9px; } .item-wrap .item-cont .item-list .prd-price .consumer b { font-weight: normal; display: none; } .item-wrap .item-cont .item-list .prd-price { margin-bottom: 14px; display:flex; align-items:center;} .item-wrap .item-cont .item-list .prd-price strike { font-size:1rem; color:#b2b4b7; font-weight:500; padding-left:15px;} .item-wrap .item-cont .item-list .prd-price .line{line-height:18px; display:flex; align-items:center;} .item-wrap .item-cont .item-list .prd-price .price { color: #000; font-size: 1.375rem; font-weight: 700; } .item-wrap .item-cont .item-list .prd-price .price b { font-weight: 700; font-size: 12px; display: none; } .item-wrap .item-cont .item-list .prd-price .soldout { color: red; font-size: 1.375rem; font-weight: bold; } .item-wrap .item-cont .item-list .prd-price .sale {display:inline-block; font-size:1.375rem; font-weight:700; padding-right:10px; color:#355BF5;} .item-wrap .item-cont .item-list .prd-color { font-size: 10px; line-height: 1; margin-bottom: 17px; } .item-wrap .item-cont .item-list .prd-preview {width:100%; height:40%; text-align:center; border:1px solid rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center; border-radius:5px; margin-bottom:20px; transition:all 0.3s;} .item-wrap .item-cont .item-list .prd-preview:hover {border:1px solid rgba(0,0,0,0.7);} .item-wrap .item-cont .item-list .prd-preview a { display:block; font-size:1rem; padding:10px 0; font-family: 'FlightSans-Regular', sans-serif;} .item-wrap .item-cont .item-list .prd-preview a img{width:6%; margin-right:5px;} .item-wrap .item-cont .item-list .prd-subname { margin-bottom: 5px; padding-top: 14px; font-size: 14px; line-height: 18px; color: #aaaaaa; text-align:left; border-top: 1px solid #eeeeee; } .item-wrap .item-cont .item-list .prd-ico { margin-bottom: 5px; } .item-wrap .item-cont .item-list p{border: none !important; padding:0 !important;} .item-wrap .item-cont .item-list .tag {display: inline-block; border: 1px solid #ccc; border-radius: 16px; padding: 4px 10px; margin: 4px 6px 4px 0; background-color: #fff; font-size: 14px;} .item-wrap .item-cont .item-list .MK-product-icons img { vertical-align: middle } .item-wrap .item-cont .nomg { padding-right: 0px } .item-wrap .item-page { margin-top: 50px; text-align: center; } .item-wrap .item-page a { padding: 0 5px } .item-wrap .item-page a:hover, .item-wrap .item-page a.now { color: #111; font-weight: bold; letter-spacing: -1px; } /* 효과 공통 */ .btn-ani01 { position: relative; overflow: hidden!important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; background: rgba(255,255,255,0.2); z-index:10; } .btn-ani01:hover { border: 1px solid #011222 !important; color: #011222 !important; } .btn-ani01::after { content: ''; width: 0%; height: 100%; display: block; background: #fff; position: absolute; -ms-transform: skewX(135deg); -webkit-transform: skewX(135deg); transform:skewX(135deg); left: -10%; opacity: 0; top: 0; z-index: -15; -webkit-transition: all .94s cubic-bezier(.2,.95,.57,.99); -moz-transition: all .4s cubic-bezier(.2,.95,.57,.99); -o-transition: all .4s cubic-bezier(.2,.95,.57,.99); transition: all .4scubic-bezier(.2,.95,.57,.99); } .btn-ani01:hover::after { opacity:1; width: 120%; } .btn-ani02 { position: relative; overflow: hidden!important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; background: rgba(255,255,255,0.2); z-index:10; } .btn-ani02:hover{ border: 1px solid #011222 !important; color: #fff !important; } .btn-ani02::after { content: ''; width: 0%; height: 100%; display: block; background: rgb(43, 46, 67); color: #fff; position: absolute; -ms-transform: skewX(135deg); -webkit-transform: skewX(135deg); transform:skewX(135deg); left: -10%; opacity: 0; top: 0; z-index: -15; -webkit-transition: all .94s cubic-bezier(.2,.95,.57,.99); -moz-transition: all .4s cubic-bezier(.2,.95,.57,.99); -o-transition: all .4s cubic-bezier(.2,.95,.57,.99); transition: all .4scubic-bezier(.2,.95,.57,.99); } .btn-ani02:hover::after { opacity:1; width: 120%; } .btn-ani02.on::after { opacity:1 !important; width: 120% !important; } /* 공통 */ .dc_per, .consumer { display:none; } .dn { display:none; } .bd_radius { border-radius: 20px; overflow:hidden; } /* 상품 다중 이미지 슬라이더 */ .item-wrap .item-cont .item-list .thumb { overflow: visible; position: relative; } .item-wrap .item-cont .item-list .thumb ul { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; justify-content: center; } .item-wrap .item-cont .item-list .thumb li { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(238, 238, 238, 0.5); font-size:0; text-indent: -9999px;} .item-wrap .item-cont .item-list .thumb li.slick-active { background: #191919; } .item-wrap .item-cont .item-list .thumb .slick-prev, .item-wrap .item-cont .item-list .thumb .slick-next { position:absolute; top: 50%; width: 9px; height: 16px; margin-top: -8px; font-size:0; text-indent: -9999px; z-index:1; } .item-wrap .item-cont .item-list .thumb .slick-prev {left:10px; background:url(/images/common/btn_multiple_prev.png) left center no-repeat;} .item-wrap .item-cont .item-list .thumb .slick-next {right:10px; background:url(/images/common/btn_multiple_next.png) right center no-repeat;} /* BASIC css end */