/* BASIC css start */ /*메인빅배너*/ #mainBnr .main_roll_left_menu { position: relative; z-index: 1; width: 100%; overflow: hidden; } #mainBnr .swiper-container { width: 100% !important; } #mainBnr .swiper-pagination-bullet { cursor: pointer; opacity: 1 !important; width: 10px !important; height: 10px !important; border-radius: 10px !important; background: #cccccc !important; } #mainBnr .swiper-pagination-bullet-active { background: #fff000 !important; } #mainBnr .swiper-button-prev { opacity: 0; background: url(//skin.makeshop.co.kr/skin/supermarket/img/prev_ico_1x.png) no-repeat; height: 52px; width: 52px; background-size: contain; color:#ffffff00 } #mainBnr .swiper-button-next { opacity: 0; background: url(//skin.makeshop.co.kr/skin/supermarket/img/next_ico_1x.png) no-repeat; height: 52px; width: 52px; background-size: contain; color:#ffffff00 } #mainBnr .swiper-button-next,#mainBnr .swiper-button-prev { top: 240px !important; margin-top: 0 !important; } #mainBnr .swiper-button-prev { left: 7%; } #mainBnr .swiper-button-next { right: 7%; } #mainBnr .swiper-button-next.swiper-button-disabled,#mainBnr .swiper-button-prev.swiper-button-disabled{cursor: pointer !important;pointer-events: inherit !important;} /* 섹션 공통 */ section{margin-bottom:100px} section .sec_inner{width: 1400px; margin: 0 auto;} section h2{text-align: center;margin-bottom: 40px;color: #333;font-family: 'Jost', sans-serif; font-size: 32px; font-weight: bold; letter-spacing: 13px; } section h2 a{float: right;} section .sec_inner .more {position: absolute; top: 10px; right: 0; font-weight: bold; font-size: 17px; color:#8d8d8d} section .sec_inner .more:hover {color:#000000} section .sec_inner .more img {width:16px; vertical-align: bottom; margin-bottom: 1px;} /* 메인 비쥬얼 배너 */ #mainSpot { position:relative; width:100%; min-width:1100px; height:500px; overflow:hidden } #mainSpot .inner { margin-left:-1000px; position:absolute; top:0; left:50%; right:0; width:2000px; height:500px } #mainSpot .bx-pager { position:absolute; bottom:15px; left:0; right:0; height:11px; text-align:center } #mainSpot .bx-pager .bx-pager-item { display:inline-block; margin:0 7px } *:first-child+html #mainSpot .bx-pager .bx-pager-item { display:inline } /* IE7 Hack */ #mainSpot .bx-pager .bx-pager-item a { display:block; width:11px; height:11px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/sp_spot_pager.png) 0 0 no-repeat } #mainSpot .bx-pager .bx-pager-item a.active { background-position:0 -11px } #sec1{width: 100%;text-align:center} #sec1 .swiper{} #sec1 .swiper ul{width: 100%;} #sec1 .swiper ul li{width: 100%;} #sec1 .swiper ul li a{display: block;width: 100%;} #sec1 .swiper-pagination{bottom: 60px;} #sec1 .swiper-pagination-bullet{width: 30px; height: 3px; border-radius: 0; background-color: #fff; } #sec1 .swiper{position:relative} #sec1 .swiper_btn_prev{position: absolute; top: 50%; left: 10%; z-index: 10; transform: translateY(-50%); cursor: pointer; } #sec1 .swiper_btn_next{position: absolute; top: 50%; right: 10%; z-index: 10; transform: translateY(-50%); cursor: pointer;} #sec2{} #sec2 .sec_inner{} #sec2 .sec_inner ul{display: flex; justify-content: space-between;} #sec2 .sec_inner ul li{position: relative; border-radius: 10px; overflow: hidden;} #sec2 .sec_inner ul li img{/*transition: filter .3s;filter: grayscale(.4); */; cursor:pointer} /*#sec2 .sec_inner ul li a{font-family: 'Noto Sans KR', sans-serif;transition: opacity .3s, margin-top .25s, background-color .3s;background: rgba(255,255,255,0); opacity: .7; font-size: 15px; color: #fff; position: absolute; top: 45%; left: 50%; z-index: 1;border: 1px solid #fff; font-weight: 400; padding: 12px 27px; border-radius: 25px; display: inline-block; transform: translateX(-50%) translateY(-50%); margin-top: 15px;}*/ #sec2 .sec_inner ul li a:hover{background-color: rgba(255,255,255,.2);} #sec2 .sec_inner ul li.hover{} #sec2 .sec_inner ul li:nth-child(1) a:hover img{content: url(/design/supercle1/card01-1.png);} #sec2 .sec_inner ul li:nth-child(2) a:hover img{content: url(/design/supercle1/card02-1.png);} #sec2 .sec_inner ul li:nth-child(3) a:hover img{content: url(/design/supercle1/card03-1.png);} #sec2 .sec_inner ul li.hover a{margin-top: 0; opacity: 1;} #sec3{} #sec3 .sec_inner{} #sec3 .sec_inner h2{} #sec3 .sec_inner h2 a{} #sec3 .sec_inner h2 a img{} #sec3 .sec_inner .sec3_prd{} #sec3 .sec_inner .sec3_prd>ul{width: 100%; display: flex; justify-content: space-between;} #sec4 .sec_inner {position:relative} #sec4 .sec_inner .sec4_prd>ul{width: 100%; display: flex; justify-content: space-between;} #sec5{} #sec5 a{display: block; width: 100%;} #sec5 a img{width: 100%;} #sec6{} #sec6 .sec_inner{} #sec6 .sec_inner h2{} #sec6 .sec_inner .sec6_cate{margin: 30px 0 40px;} #sec6 .sec_inner .sec6_cate ul{display:flex;flex-wrap:wrap; justify-content:center } #sec6 .sec_inner .sec6_cate ul li{margin:0 20px} #sec6 .sec_inner .sec6_cate ul li a{font-family: 'Noto Sans KR', sans-serif; transition:border-color .3s; border-bottom:2px solid transparent; color:#bbbbbb; font-size: 15px; display: block;font-weight: 400;text-align:center; padding: 8px 0; transition:border-color .2s, color .2s;} #sec6 .sec_inner .sec6_cate ul li.on>a{ color: #000;border-color:#000;} #sec6 .sec_inner .sec6_prd{} #sec6 .sec_inner .sec6_prd>div{display:none;} #sec6 .sec_inner .sec6_prd>div.show{display: block;} #sec6 .sec_inner .sec6_prd>div>ul{width: 100%; display: flex; flex-wrap: wrap; } #sec6 .sec_inner .sec6_prd>div>ul>li{width: 335px; position: relative; height: 335px; margin-bottom: 20px; border-radius: 10px; overflow: hidden;} #sec6 .sec_inner .sec6_prd>div>ul>li .thumb{width: 100%; height: 100%;} #sec6 .sec_inner .sec6_prd>div>ul>li .thumb img{width: 100%;display: block; height: 100%; object-fit: cover;} #sec6 .sec_inner .sec6_prd>div>ul>li .info{display: none; transition: opacity .4s; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.86);} #sec6 .sec_inner .sec6_prd>div>ul>li .info.show1{display: block;} #sec6 .sec_inner .sec6_prd>div>ul>li .info.show2{opacity: 1;} #sec6 .sec_inner .sec6_prd>div>ul>li .info.show2 .info_inner{margin-top: 0; opacity: 1;} #sec6 .sec_inner .sec6_prd>div>ul>li .info.show2 .prd_icon{opacity: 1;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .info_inner{width: 230px; height: 200px; display: flex;opacity: 0; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin-top: 15px; transition: margin-top .3s, opacity .7s; } #sec6 .sec_inner .sec6_prd>div>ul>li .info .info_inner p{} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon{position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);opacity: 0; transition: opacity .5s;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon ul{display: flex; align-items: center;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon ul li{margin: 0 10px;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon ul li a{display: block;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon ul li a img{} #sec7 .sec_inner {position: relative} #sec7 .sec_inner .rev_sec ul{display:flex;} #sec7 .sec_inner .rev_sec ul li .content {cursor: pointer;} #sec7 .sec_inner .rev_sec ul li .rv_thumb{width: 280px; height: 280px;margin:0 auto;position:relative;} #sec7 .sec_inner .rev_sec ul li .rv_thumb a{display: block; width: 100%; height: 100%; border-radius:10px; overflow:hidden;display: flex;justify-content: center;align-items: center;border-radius:50%;z-index:4;position: relative;} #sec7 .sec_inner .rev_sec ul li .rv_thumb a img{min-width: 100%;width:100%;min-height:100%;object-fit: cover;} #sec7 .sec_inner .rev_sec ul li .rv_txt{height: 185px; padding: 30px; background-color:#fff} #sec7 .sec_inner .rev_sec ul li .rv_txt .prd_name{color: #222; font-size: 15px;font-family: 'Noto Sans KR', sans-serif; font-weight: 500;letter-spacing: -.7px;text-align:center ; margin-bottom:15px;display: -webkit-box;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow:hidden;} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_cont{ display: -webkit-box;overflow: hidden;-webkit-line-clamp: 4;-webkit-box-orient: vertical;} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_cont p{line-height:1.5;font-size: 15px; color: #777; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -.7px;text-align:left;} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score{margin:10px 0;text-align:center; border-top:1px solid #eceade;padding-top:10px;} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score>span{} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score .star{font-size:15px;color:#999999} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score .heart{} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score .heart img{display: inline-block; transform: translateY(-2px); margin-right:4px} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score .score{color: #242424; font-size: 17px; font-family: 'Jost', sans-serif; font-weight:500;} /* START : 베스트 리뷰 */ .review-list-random {} .review-list-random .content:hover .rv_thumb{position:relative;} .review-list-random .content .rv_thumb:before { content: ''; position: absolute; top: -7px; left: -7px; width: 294px; height: 294px; border-radius: 50%; background: conic-gradient(#2c75ff, #aa01d3, #84f2ff, #2c75ff); z-index: 1; /* 이미지 뒤로 */opacity:0;transition:0.2s} .review-list-random .content .rv_thumb:after { content: ''; position: absolute; top: -3px; left: -3px; width: 286px; height: 286px; border-radius: 50%; background:#fff; z-index: 2; /* 이미지 뒤로 */opacity:0;transition:0.2s} .review-list-random .content:hover .rv_thumb:before, .review-list-random .content:hover .rv_thumb:after {opacity:1} .review-list-random .content:hover .prd_name {font-weight: bold !important;} .review_img_info {margin-top:20px;display:blcok;} .review_img_info .name {float:left;margin-right:10px;display:block;} .review_img_info .date {margin-top:5px;color:#000;display:flex;align-items:center;} .review_img_info .date img {width:18px;margin-right:5px;} .review_score {display:flex;float:left;justify-content: center;align-items: center;} .review_score li {position:relative;margin-right:5px;} .review_score li:last-child {margin-right:0;} .review_score li > img {position: relative;z-index: 5;width:15px;height:auto;display:block;} .review_score li > span.rating {position: absolute;z-index: 4;top: 0;left: 0;display: block;width: 90%;height: 90%;background-color: #f27370;} .review_layer_popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(147 147 147 / 34%); display: flex; align-items: center; justify-content: center; z-index: 1000; } .review_layer_popup .popup_inner { background: #fff; padding: 30px 30px 30px; max-width: 800px; width: 90%; position: relative; } .review_layer_popup .popup_top {position:relative;border-bottom:1px solid #000;font-size:20px;padding-bottom:20px;font-weight:bold;} .review_layer_popup .popup_top .btn_close {width:30px;height:30px;position: absolute;top: 0;right: 0;background: none;border: none;font-size: 18px;cursor: pointer;} .review_layer_popup .popup_top .btn_close img {width:100%;height:auto} .review_layer_popup #popupContent {padding-top:30px;min-height:530px;display:flex;align-items: flex-start;} .review_layer_popup #popupContent img {max-width:100%} .review_layer_popup #popupContent .img {width:50%;max-height:50vh;overflow:hidden; display: flex;justify-content: center;align-items: center;} .review_layer_popup #popupContent .review_content_wrap {padding-left:20px;width:50%; overflow: hidden; overflow-y: auto; height: 480px;} .review_layer_popup #popupContent .review_title {font-size:20px;font-weight:bold;word-break: keep-all;} .review_layer_popup #popupContent .review_img_info {border:1px solid #000;border-left:0;border-right:0;position:relative;display:flex;align-items: center;margin-bottom:40px;} .review_layer_popup #popupContent .review_img_info > * {padding: 15px 0;width: 50%;box-sizing: border-box;float: left;margin: 0;text-align:center;} .review_layer_popup #popupContent .review_img_info > * + * {border-left: 1px solid #000;} .review_layer_popup #popupContent .review_img_info .date {border:0;padding:0;position:absolute;bottom:-30px;right:0;width:auto;display:none;} .review_layer_popup #popupContent .review_content {line-height: 21px;} .review_layer_popup .review_score li > img {width:20px;} .review_pop_list_wrap {padding:20px 60px 0;position:relative;border-top:1px solid #000;margin-top:30px;} .review_pop_list_wrap #popupSlide .img {overflow:hidden;display:flex;justify-content:center;align-items:center;width:95px;height:95px;} .review_pop_list_wrap #popupSlide .img img {min-width:100%;width:100%;height:auto;min-height:100%;} .review_pop_list_wrap .content {cursor: pointer;overflow:hidden;transition:0.2s;border:1px solid #fff;} .review_pop_list_wrap .swiper-button-prev, .review_pop_list_wrap .swiper-button-next {color:#000;top:70px;} .review_pop_list_wrap .swiper-button-prev:after, .review_pop_list_wrap .swiper-button-next:after {font-size:30px} .review_layer_popup .content {transform:0.2s;box-sizing:border-box;} .review_pop_list_wrap .swiper-slide.on .content {opacity:0.5;border:1px solid #000;} /* END : 베스트 리뷰 */ /* BASIC css end */