/* BASIC css start */ @charset "utf-8"; /* BASIC css start */ .section .sec_inner { width:1690px; margin: 80px auto; } .section h2 { font-size:30px; color:#333333; font-weight:600; margin-bottom: 27px; } a.more { color: #5d5d5d; border:1px solid #ccc; font-size:13px; border-radius:20px; margin-left:20px; padding:3px 12px; display:inline-block; font-weight:500; float:right } a.allMore { background: #1a1a1a; color:#fff; border-radius: 30px; width: 95px; line-height: 25px; text-align: left; display: inline-block; float: right; text-align: center;} /* a.more { color: #5d5d5d; border:1px solid #ccc; font-size:13px; border-radius:20px; margin-left:20px; padding:3px 12px; display:inline-block; font-weight:500; float:right } a.allMore { background: #eaeaea; color: var(--black); border-radius: 30px; width: 95px; line-height: 25px; text-align: left; display: inline-block; float: right; text-align: center;} */ /* sec1 */ #sec1 .swiper > ul > li { position: relative; width: 100%; } #sec1 .swiper > ul > li > a { display: block; width: 100%; } #sec1 .swiper > ul > li > a > img { width: 100%; } #sec1 .swiper > ul > li > .txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #sec1 .swiper>ul>li>.txt p.sub { margin-bottom: 10px; transition: left .5s, opacity .8s; font-family: 'sofia-pro'; font-size: 24px; color: #ffffff; margin-left: 165px; } #sec1 .swiper>ul>li>.txt h2 { transition: left .7s,opacity .8s; margin-left: 162px; font-family: 'SUIT'; font-size: 42px; color: #ffffff; font-weight: bold; } /* sec2 */ #sec2 { margin: 95px 80px 140px; } #sec2 ul { display: flex; gap: 0 30px;} #sec2 ul li {width: calc(25% - 20px);} #sec2 ul li .img_wrap { overflow: hidden; border-radius: 500px; margin: 0 auto;} #sec2 ul li:hover img { transform: scale(1.06); transition: ease-in-out 0.8s;} #sec2 ul li img { transition: ease-in-out 0.8s;} #sec2 ul li a { display: flex; flex-flow: column; width: 100%; height: 100%;} #sec2 ul li a span { display: inline-block; width: 100%; text-align: center; margin-top: 16px; font-size: 20px; font-weight: 500; color: var(--black);} /* sec3 */ #sec3 { margin: 0 80px 95px;} #sec3 .sec_inner { width: 100%; margin: 0;} #sec3 ul { display: flex; gap: 30px;} #sec3 ul li { width: 25%; min-width: 375px;} /* sec4 */ #sec4 {background: #333;overflow: hidden;padding: 15px 0;} .lineBanner {width: 100%;overflow: hidden;} .lineBanner-wrap{display: flex;width: max-content;animation: marquee 40s linear infinite;will-change: transform;} .lineBanner-wrap span {margin-right: 136px;flex-shrink: 0;} .lineBanner-wrap img {display: block;} @keyframes marquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } /* sec5 */ #sec5 { margin: 95px 80px;} #sec5 .item_wrap { display: flex; gap: 29px;} #sec5 .item_wrap .item { width: 33.33%;} #sec5 .item_wrap .item img { width: 100%;} /* sec6 */ #sec6 img { width: 100%;} /* sec7 */ #sec7 { margin: 95px 0 0;} #sec7 h2 { margin-left: 80px;} #sec7 .sec7_wrap { height: 416px; background: #888888;} /* thankGoods */ #thankGoods { display: none;} #thankGoods { width: 100%; position: relative; margin-top:80px } #thankGoods .bg { width: 100%; } #thankGoods .bg img { width: 100%; } #thankGoods .txt_cont { width: 1690px; margin: 0 auto; } #thankGoods .txt_cont .txt_inner { padding: 40px 0; width: 670px; } #thankGoods .txt_cont .txt_inner p.tit { color: #000000; font-size: 20px; font-weight: 500; margin-bottom: 10px; } #thankGoods .txt_cont .txt_inner h3 { color: #000; font-size: 37px; font-weight: 700; margin-bottom: 20px; } #thankGoods .txt_cont .txt_inner p.cont { color: #474747; font-size: 16px; line-height: 1.4; font-weight: 400; margin-bottom: 70px; } #thankGoods .txt_cont .txt_inner>a { color: #474747; font-size: 13px; display: block; } #thankGoods .swiper { position: absolute; bottom: 0; right:calc(50% - 845px); width: 1020px; padding: 10px 10px 50px; } #thankGoods .swiper ul.swiper-wrapper { display: flex; align-items: flex-end; } #thankGoods .swiper ul.swiper-wrapper li.swiper-slide { padding: 0px 0px 40px; border-radius: 10px; overflow:hidden; background-color: transparent; transition: background-color .3s, padding .4s,box-shadow .3s; } #thankGoods .swiper ul.swiper-wrapper li.swiper-slide:hover { background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .1); padding: 0px 0px 55px; } #thankGoods .swiper ul.swiper-wrapper li.swiper-slide:hover a.view_more { color: #6273ff; } #thankGoods .swiper ul.swiper-wrapper li.swiper-slide .thumb { width: 100%; padding-bottom: 0px; transition: padding-bottom .3s; } #thankGoods .swiper ul.swiper-wrapper li.swiper-slide .thumb a { display: block; width: 100%; text-align: center; } #thankGoods .swiper ul.swiper-wrapper li.swiper-slide .info { padding-bottom:40px } #thankGoods .swiper ul.swiper-wrapper li.swiper-slide .info p { text-align: center; justify-content:center } #thankGoods .swiper ul.swiper-wrapper li.swiper-slide a.view_more { text-align: center; transition:color .2s; display: block; color:#474747; font-size:11px; } #thankGoods .swiper-pagination { bottom:0px; top:unset } #thankGoods .swiper-pagination-bullet { width: 30px; height: 2px; border-radius: 0; background-color:#9c8f87; } #thankGoods .swiper-pagination-progressbar { background-color:rgba(0,0,0,0.09); height:4px !important } #thankGoods .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color:#333 } /* StylingSec */ #StylingSec { display: none;} #StylingSec { margin-top:100px } #StylingSec .sec_inner h2 { margin-bottom:30px } #StylingSec .sec_inner .Styling_cont ul { display: flex; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li { width: 400px; margin-right:30px; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li:last-child { margin-right:0 } #StylingSec .sec_inner .Styling_cont ul li:hover .info .inner { background-color: rgba(255,255,255,.8); } #StylingSec .sec_inner .Styling_cont ul li:hover .info .inner p.txt { opacity: 1; } #StylingSec .sec_inner .Styling_cont ul li:hover .info .inner p.brandname { opacity: 1; margin-bottom:15px } #StylingSec .sec_inner .Styling_cont ul li a { display: block; position: relative; width: 100%; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li .thum_img { width: 100%; } #StylingSec .sec_inner .Styling_cont ul li a .info { display:none; position: absolute; width: 100%; bottom: 0px; left: 0; padding:15px 12px; } #StylingSec .sec_inner .Styling_cont ul li a .info .inner { background-color: transparent; transition: background-color .5s; padding: 25px 0; } #StylingSec .sec_inner .Styling_cont ul li a .info .inner p { text-align: center; } #StylingSec .sec_inner .Styling_cont ul li a .info .inner p.brandname { opacity: 0; transition: opacity .9s, margin-bottom .4s; font-family: 'Jost', sans-serif; font-size: 30px; color: #000; font-weight: 700; margin-bottom: -10px; } #StylingSec .sec_inner .Styling_cont ul li a .info .inner p.txt { opacity: 0; transition: opacity .1s; font-family: 'Jost', sans-serif; font-size: 12px; color: #888888; font-weight: 500; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li .styling-item-list { border:1px solid #aaaaaa; box-sizing: border-box; margin-top:-1px; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li .styling-item-list dl { padding:20px; display:flex; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li .styling-item-list dl dt { display:inline-block; margin-right:30px; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li .styling-item-list dl dd { display:inline-block; vertical-align:middle; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li .styling-item-list dl dd .prd-name { padding-bottom:10px; } #StylingSec .sec_inner .Styling_cont ul .styling-item-li .styling-item-list dl dd .prd-name a { font-family:'sofia-pro'; color:#000000; font-size:15px; } /* 타임세일 - 2023.09.18 */ .product-price-info { line-height: 24px; } .prd_list .box .box_prd .info .price span.dc_percent {font-family: 'Roboto', sans-serif;font-size: 35px;font-weight: 500;letter-spacing: -0.02em;line-height: 1.2em;position : relative;bottom : -10px;color: #e74c3c !important;} .prd_list .box .box_prd .info .price span.dc_percent i { font-size: 28px; font-weight: 600; } .prd_list .box .box_prd .info .price span.pprice { font-family: 'Nanum Gothic', sans-serif; font-size: 13px; letter-spacing: -0.04em; font-weight: 500; } .prd_list .box .box_prd .info .price span.pprice2 b { font-family: 'Roboto', sans-serif; font-size: 22px; letter-spacing: -0.02em; vertical-align: bottom; font-weight: 600; } .prd_list .box .box_prd .info .price span.pprice2 { font-family: 'Nanum Gothic', sans-serif; font-size: 14px; letter-spacing: -0.04em; font-weight: 600; color: #000; line-height: 23px; } .prd_list .box .box_prd .info .price dl.product-price-info.diff dt {} .prd_list .box .box_prd .info .price dl.product-price-info.diff dt .dc_percent {} .prd_list .box .box_prd .info .price dl.product-price-info.diff dt .dc_percent i { font-size: 18px; } .prd_list .box .box_prd .info .price span.dc_percent {} .prd_list .box .box_prd .info .price span.dc_percent i { font-size:0.7em; font-style: normal; } .prd_list .box .box_prd .info .price span.dc_percent.hprice { color:#e74c3c !important; } .prd_list .box .box_prd .info .price { font-size: 1.5em !important; } dl.product-price-info:after { clear:both; content: ''; display:table; } dl.product-price-info dt {margin-right: 10px;width: auto;float:left;} dl.product-price-info dd { float:left; } .prd_list .box .box_prd .addbtn.b15 { bottom: 15px !important; } .box_prd .info .name {/* text-align: left !important; *//* min-height: 33px; *//* line-height: 18px !important; */} .box_prd .info .price { text-align: left !important; } /* 상품관련 */ .prd_list { font-size: 0; letter-spacing: 0; line-height: 0; margin: 0 -20px; } .prd_list .box .box_prd { display: inline-block; vertical-align: top; font-size: 12px; letter-spacing: normal; line-height: 1.5; padding: 0 20px; margin: 0 0 40px; box-sizing: border-box; position: relative; } .prd_list .box .box_prd .discount_rate { display: none; position: absolute; top: 1px; right: 19px; z-index: 4; width: 40px; height: 40px; text-align: center; white-space: nowrap; overflow: hidden; font-size: 17px; line-height: 42px; font-weight: 500; color: #fff; background: #000;} .prd_list .box .box_prd .discount_rate.active { display: block; border-radius:0 5px 0 5px; } /* mouse over on product */ .prd_list .box .box_prd .over { position: absolute; top: -15px; left: 5px; right: 5px; bottom: -20px; z-index: 2; border: 0px solid #000; opacity: 0; } .prd_list .box .box_prd .addbtn { position: absolute; bottom: 0; right: 21px; z-index: 4; font-size: 0; letter-spacing: 0; line-height: 0; } .prd_list .box .box_prd .addbtn span { display: inline-block; height: 30px; font-size: 20px; color: #000; line-height: 28px; text-align: center; background: #fff; position: relative; padding: 0 5px; margin: 0 -1px; cursor: pointer; border: 1px solid #d4d4d4; box-sizing: border-box; } .prd_list .box .box_prd .addbtn img { opacity: 0; width: 30px; height: 30px; position: absolute; top: 0; left: 0; } .prd_list .box .box_prd .info { position: relative; z-index: 3; } .prd_list .box .box_prd .info li{position:relative;} .prd_list .box .box_prd .info .thumb { position: relative; margin: 0 0 20px; } .prd_list .box .box_prd .info .thumb img { width: 100%; vertical-align: top; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border:1px solid #ececec; } .mk_option_preview { margin: 30px 0 0 -147px; } .prd_list .box .box_prd .info .price { font-size: 14px; font-weight: 700; color: #000; padding: 15px 0 0 0; } .prd_list .box .box_prd .info .price span { display: block; font-size: 12px; font-weight: 400; color: #aeaeae; } .prd_list .box.column2 .box_prd { width: 50%; } .prd_list .box.column3 .box_prd { width: 25%; height:375px; } .prd_list .box.column4 .box_prd { width: 25%; } .prd_list .box.column5 .box_prd { width: 20%; } #timeSale { background-color:#FAFAFD; } #timeSale h2 { margin-bottom: 30px; } #timeSale .content .box_prd { width: 25%; padding: 0 40px 0 0; } #timeSale .boxTimesale {position: absolute;bottom: -1px;width: 100%;border-radius: 5px;z-index: 10;} #timeSale .boxTimesale { font-weight: 600; color: #000; font-family: 'Nanum Gothic', sans-serif; } #timeSale .boxTimesale .timer {margin: 0 auto;width: 100%;color: #fff;font-size: 13px;font-weight: 700;line-height: 42px;background: rgba(51,51,51,.5);text-align: center;} #timeSale .boxTimesale .timer .timeBox { display:inline-block; font-family:'Roboto', sans-serif; font-weight:bold; background-color:#333; color:#fff; border-radius:4px; text-align:center; margin-right:2px; } #timeSale .boxTimesale .timer .timeBox.days { background-color:#FF542A; } #timeSale .boxTimesale .timer .timeBox {width:31px;height:31px;line-height: 29px;font-size:16px;} #timeSale .boxTimesale .appendtxt { display:inline-block; font-family: 'Nanum Gothic', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; vertical-align: -10%; } #timeSale .swiper-container { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } #timeSale .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } #timeSale .pagination { position: relative; text-align: center; width: 100%; padding: 0 0 60px 0; } #timeSale .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; margin: 0 3px; cursor: pointer; font-size:14px; } #timeSale .swiper-active-switch { background: #fff; } #timeSale .content .swiper-container .swiper-pagination-timesale { padding-top: 60px; } #timeSale .content .swiper-container .swiper-pagination-timesale .custom-switch-timesale { cursor:pointer; display: inline-block; border-radius: 100%; width:28px; height:28px; line-height:28px; font-size:12px; color:#333; background:#fff; border:1px solid #e6e6e6; opacity:1; margin: 0 4px; } #timeSale .content .swiper-container .swiper-pagination-timesale .custom-switch-timesale.active { background:#ffb906; border:1px solid #ffb906; color:#fff; } #timeSale .prd_list .box .box_prd .info .name {font-family: 'Nanum Gothic', sans-serif;line-height: 32px !important;letter-spacing: -0.02em;font-size: 16px;font-weight: 400 !important;color: #000;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #timeSale .prd_list .box .box_prd .info .price { font-family: 'Roboto', sans-serif; font-size: 22px !important; font-weight: 900; letter-spacing: -0.02em; line-height: 25px; } #timeSale .prd_list .box .box_prd .info .price .txtwon { font-family: 'Nanum Gothic', sans-serif; font-size: 19px; font-weight: 800; display: inline-block; color: #000; letter-spacing: -0.02em; vertical-align: bottom; } #timeSale .swiper-pagination-bullet { cursor: pointer; display: inline-block; border-radius: 100%; width: 28px; height: 28px; line-height: 28px; font-size: 12px; color: #333; background: #fff; border: 1px solid #e6e6e6; opacity: 1; margin: 0 4px; } #timeSale .swiper-pagination-bullet-active { background: #e74c3c; border: 1px solid #e74c3c; color: #fff; } .people-wrap { position: relative; width: 1690px; margin:0 auto; overflow: hidden; } .people-slide .swiper-wrapper { transition-timing-function: linear; } .people-slide .swiper-slide { width: 20% !important; margin: 0 0.7%; } .people-slide .swiper-slide img { width: 100%; } /* BASIC css end */