@charset "utf-8";
/*************************************************************************
* @ 서비스명   : commonui
* @ 파일명     : /css/goods.css
* @ 페이지설명  : goods.css
* @ 작성자     : 한주현 (pointweb)
* @ 작성일     : 2021-02-04
************************** 수정이력 **************************************
* 날짜                    작업자                 변경내용
* 2021-02-04              한주현                 최초작성
**************************************************************************/

.goods{}

.category-tab{margin-top:40px;display: flex;justify-content: center;gap:50px;border-bottom: 1px solid #cdd2d5;}
.category-tab a{position:relative;display:flex;align-items: center;justify-content: center;height:60px; font-size: 16px;font-weight: normal;color: #202020;gap:2px;}
.category-tab a:before{content: "";position:absolute;left:0;bottom:0;display: none;width:100%;height:2px;background: #231815;}
.category-tab a:after{content: "";display:none;width:16px;height:16px;background: url(/_public/images/icon/ico_chk.svg) no-repeat;background-size: cover;}
.category-tab a.on{font-weight: bold;}
.category-tab a.on:before{display: block;}
.category-tab a.on:after{display: block;}


.goods .list{margin-top:40px;}
.goods .top-group {display: flex;justify-content: space-between;align-items: center;}
.goods .top-group p{ font-size: 16px;font-weight: 500;color: #202020;}
.goods .top-group p strong{font-weight: bold;display: inline-block;margin-left: 10px;}
.goods .top-group select{width:160px;height:40px;padding:0 10px 0 40px;font-size: 15px;font-weight: bold;color: #202020;text-align: left; border:1px solid #a5a5a5;background: url(/_public/images/icon/ico_sort.svg) no-repeat;background-position: 15px 50%;}
.goods .top-group select:focus{}
.goods .top-group .item-tab{display:flex;}
.goods .top-group .item-tab button{position:relative;display: inline-block;margin-lefT:30px;font-size:12px;color:#090909;font-weight:400;}
.goods .top-group .item-tab button:first-child{margin-left:0;}
.goods .top-group .item-tab button:before{content: "";position:absolute;top:-15px;left:50%;transform:translateX(-50%);display: none;width:10px;height: 10px;border-radius: 100%;background: #090909;}
.goods .top-group .item-tab button.active,
.goods .top-group .item-tab button:hover{font-weight: 600;}
.goods .top-group .item-tab button.active:before{display:none;}


.goods-list{margin-top:20px;}
.goods-list ul{font-size:0;display: flex;flex-wrap: wrap;gap:60px 40px;}
.goods-list ul li{position:relative;display: inline-block;width:calc(25% - 30px);}
.goods-list ul li .badge-new{position:absolute;top:1px;left:1px;display:flex;align-items:center;justify-content:center;width:56px;height:25px;background: #0082b2;color:#fff; font-size: 16px;font-weight: 500;z-index: 10;}
.goods-list ul li .img{position: relative;overflow: hidden;border: solid 1px #e5e5e5;background-color: #f8f8f8;}
.goods-list ul li .img .soldout-txt{position: absolute;left:0;top:0;display:flex;padding:10px;width:100%;height:100%;background: rgba(0,0,0,0.5);text-align: center;  font-size: 18px;font-weight: 500;color: #fff;opacity: 0;align-items: center;justify-content: center;}
.goods-list ul li .img a{position:relative;display: block;}
.goods-list ul li .img a img{display: block;width:100%;transition: all 0.3s;}
.goods-list ul li .img .btn-group{position:absolute;left:0;bottom:25px;width:100%;display: flex;gap:5px;justify-content:center;align-items: center;z-index: 11;opacity: 0;transition: all 0.3s;}
.goods-list ul li .img .btn-group .btn-cart{font-size:0;transition: all 0.3s;display: block;width:45px;height:45px;background: url(/_public/images/icon/ico_cart_off.svg) no-repeat;background-size: cover;}
.goods-list ul li .img .btn-group .btn-cart.on{background: url(/_public/images/icon/ico_cart_on.svg) no-repeat;background-size: cover;}
.goods-list ul li .img .btn-group .like{font-size:0;transition: all 0.3s;display: block;width:45px;height:45px;background: url(/_public/images/icon/ico_wish_off.svg) no-repeat;background-size: cover;}
.goods-list ul li .img .btn-group .like.active{background: url(/_public/images/icon/ico_wish_on.svg) no-repeat;background-size: cover;}
.goods-list ul li .img.soldout-goods .soldout-txt{opacity: 1;}
.goods-list ul li .img.soldout-goods .btn-group{display: none;}

.goods-list ul li .box{margin-top:15px;}
.goods-list ul li .box > em{display: block; font-size: 16px;font-weight: 600;color: #a5a5a5;}
.goods-list ul li .box h3{font-size: 17px;font-weight: 500;line-height: 1.56;color: #202020;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;height:53px;}
.goods-list ul li .box .bottom{}
.goods-list ul li .box .bottom .price{position:relative;font-size: 18px;font-weight: bold;color: #202020;display: flex;flex-wrap: wrap;gap:0 5px;}
.goods-list ul li .box .bottom .price em{color:#0082b2;}
.goods-list ul li .box .bottom .price s{display: block;width:100%;font-size: 16px;font-weight: 500;color: #a5a5a5;}
.goods-list ul li:hover .img a img{transform: scale(1.1);}
.goods-list ul li:hover .img .btn-group{opacity: 1;}

.goods .view{}
.goods .view .navi-box{display: flex;align-items: center;gap:20px;}
.goods .view .navi-box button{display: inline-block;}
.goods .view .navi-box button img{display: block;}
.goods .view .navi-box .breadcrumbs{display: flex;gap:22px;}
.goods .view .navi-box .breadcrumbs span{position:relative;display: inline-block; font-size: 16px;font-weight: normal;color: #202020;}
.goods .view .navi-box .breadcrumbs span:before{content: "";position: absolute;top:4px;left:-17px;width:12px;height:12px;background: url(/_public/images/icon/ico_breadcrumbs.svg) no-repeat;background-size: cover;}
.goods .view .navi-box .breadcrumbs span:first-child:before{display: none;}
.goods .view .view-top{display: flex;justify-content:space-between;gap:40px;border-top:2px solid #202020;padding-top:40px;}
.goods .view .view-top > div{width:100%;max-width:680px;}
.goods .view .view-top .goods-img{max-width:520px;overflow: hidden;position: relative;}
.goods .view .view-top .goods-img .gallery-top{}
.goods .view .view-top .goods-img .gallery-top .swiper-slide{}
.goods .view .view-top .goods-img .gallery-top .swiper-slide img{display: block;width:100%;}
.goods .view .view-top .goods-img .swiper-button-next,
.goods .view .view-top .goods-img .swiper-button-prev{position: absolute;top: 50%;transform: translateY(-50%);width:28px;height:28px;z-index: 10;font-size:0;margin-top:0;}
.goods .view .view-top .goods-img .swiper-button-prev:after,
.goods .view .view-top .goods-img .swiper-button-next:after{display: none;}
.goods .view .view-top .goods-img .swiper-button-prev{background: url(/_public/images/icon/ico_target_left2.svg) no-repeat;background-size: cover;left:0;}
.goods .view .view-top .goods-img .swiper-button-next{background: url(/_public/images/icon/ico_target_right2.svg) no-repeat;background-size: cover;right:0;}
.goods .view .view-top .goods-img .thumnail-wrap{position: relative;margin-top:28px;padding:0 30px;overflow: hidden;}
.goods .view .view-top .goods-img .gallery-thumbs{overflow: hidden;}
.goods .view .view-top .goods-img .gallery-thumbs .swiper-slide{position:relative;border: 1px solid #e5e5e5;;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.goods .view .view-top .goods-img .gallery-thumbs .swiper-slide:before{content: "";position:absolute;top:0;left:0;display: block;width:100%;height:100%;background: rgba(247, 248, 248, 0);opacity: 0;}
.goods .view .view-top .goods-img .gallery-thumbs .swiper-slide.swiper-slide-thumb-active{border-color:#202020;}
.goods .view .view-top .goods-img .gallery-thumbs .swiper-slide.swiper-slide-thumb-active:before{opacity: 1;}
.goods .view .view-top .goods-img .b-img{position: relative;}
.goods .view .view-top .goods-img .b-img img{width:100%;}
.goods .view .view-top .goods-img .s-img{font-size:0;margin-top:25px;}
.goods .view .view-top .goods-img .s-img img{width:100%;}
.goods .view .view-top .goods-img .s-img span{position: relative;font-size:0;display:inline-block;margin:1%;width:23%;cursor: pointer;border:1px solid transparent;}
.goods .view .view-top .goods-img .s-img span.active{border-color:#000;}
.goods .view .view-top .goods-img .s-img span img{width:100%;}
.goods .view .view-top .goods-img.soldout .b-img:before{content: "";position: absolute;top:0;left:0;width:100%;height:100%;background: rgba(255,255,255,0.5);display: block;z-index: 10;}
.goods .view .view-top .goods-img.soldout .b-img:after{content: "일시품절";position: absolute;left:0;bottom:0;display:block;padding:20px 10px;width:100%;background: rgba(0,0,0,0.42);text-align: center;  font-size: 18px;font-weight: 500;color: #fff;z-index: 11;}
.goods .view .view-top .detail-info{}
.goods .view .view-top .detail-info .badge{display: flex;margin-bottom: 10px;}
.goods .view .view-top .detail-info .badge i{display: flex;padding:0 5px;line-height:18px;height:18px;font-size: 12px;font-weight: 500;color:#fff;}
.goods .view .view-top .detail-info .badge .new{background: #0082b2;}
.goods .view .view-top .detail-info .badge .sold-out{background: #cdd2d5;}
.goods .view .view-top .detail-info .hgroup{position:relative;padding-bottom: 40px;}
.goods .view .view-top .detail-info .hgroup .ct-name{display: inline-block;font-size: 18px;font-weight: 600;color: #0082b2;}
.goods .view .view-top .detail-info .hgroup em{display: block;font-size: 18px;font-weight: normal;color: #202020;}
.goods .view .view-top .detail-info .hgroup h3{margin-top:10px;font-size: 28px;font-weight:600;color: #202020;padding-right:80px;}
.goods .view .view-top .detail-info .hgroup p{margin-top:25px;padding:25px 30px;font-size: 15px;font-weight: normal;line-height: 1.67;color: #202020;background: #f5f8fe;}
.goods .view .view-top .detail-info .hgroup .sns-group{position: absolute;right: 0;top: -5px;display: flex;gap:10px;}
.goods .view .view-top .detail-info .hgroup .sns-group .like{font-size:0;transition: all 0.3s;display: block;width:45px;height:45px;background: url(/_public/images/icon/ico_wish_off.svg) no-repeat;background-size: cover;border:1px solid #e8e8e8;border-radius: 100%;}
.goods .view .view-top .detail-info .hgroup .sns-group .like.active{background: url(/_public/images/icon/ico_wish_on.svg) no-repeat;background-size: cover;}
.goods .view .view-top .detail-info .hgroup .sns-group .button-share{background:url(/_public/images/icon/ico_share.svg) no-repeat;background-size: cover; font-size:0;width:45px;height:45px;border:1px solid #e8e8e8;border-radius: 100%;display:flex;align-items: center;justify-content: center;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon{display:none;position:absolute;right: 0;padding:30px;width:320px;font-size:0; border-radius: 5px;box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);background-color: #f8f8f8;z-index: 10;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon.active{display: block;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .top-box{position: relative;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .top-box h4{font-size: 21px;font-weight: bold;letter-spacing: -0.42px;color: #231815;text-align: center;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .top-box button{position: absolute;top:6px;right:0;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .top-box button img{display: block;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .icon-list{margin-top:20px;display:flex;justify-content: space-between;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .icon-list button{width:55px;display: flex;flex-direction: column;align-items: center;gap:5px;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .icon-list button i{display:inline-block;padding:10px;border-radius: 5px;border: solid 1px #e5e5e5;background-color: #fff;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .icon-list button i img{display: block;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .icon-list button span{display: block;text-align: center;font-size: 14px;font-weight: 500;letter-spacing: -0.28px;color: #202020;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .input-box{margin-top:25px;display: flex;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .input-box input[type="text"]{width:calc(100% - 70px);height:40px; border: solid 1px #e5e5e5;background-color: #fff;padding:0 10px;font-size: 14px;font-weight: normal;letter-spacing: -0.28px;color: #231815;}
.goods .view .view-top .detail-info .hgroup .sns-group .sns-icon .input-box button{display: flex;width:70px;height:40px;background: #231815;align-items: center;justify-content: center;font-size: 14px;font-weight: 500;letter-spacing: -0.28px;color: #fff;}


.goods .view .view-top .detail-info dl{padding-bottom: 10px;}
.goods .view .view-top .detail-info dl + dl{padding-top:30px;padding-bottom:0;border-top:1px solid #e8e8e8;}
.goods .view .view-top .detail-info dl dt{width:140px;font-size: 18px;font-weight: 600;color: #231815;}
.goods .view .view-top .detail-info dl dt.price-customer{top:5px;}
.goods .view .view-top .detail-info dl dd{position:relative;padding:0 0 25px 140px;font-size: 18px;font-weight: bold;color: #1a1311;}
.goods .view .view-top .detail-info dl dd s{font-size: 16px;font-weight: 500;color: #a5a5a5;}
.goods .view .view-top .detail-info dl dd strong{display: block;font-size: 21px;font-weight: bold;color: #231815;}
.goods .view .view-top .detail-info dl dd em{display:inline-block;margin-right:5px;color:#0082b2;}
.goods .view .view-top .detail-info dl dd .txt{position:relative;display: inline-block;padding-left:20px;margin-left:20px;font-size: 16px;font-weight: normal;color: #a5a5a5;}
.goods .view .view-top .detail-info dl dd .txt:before{content: "";position:absolute;top:3px;left:0;display: inline-block;width:15px;height:15px;background: url(/_public/images/icon/ico_noti.svg) no-repeat;background-size: cover;}
.goods .view .view-top .detail-info dl dd select{width:100%;font-size:16px; height: 50px;border:1px solid #e3e3e3;padding:0 40px 0 25px;background:url(/_public/images/@draft/select_icon.png) no-repeat;background-position: 95% 50%;}
.goods .view .view-top .detail-info dl dd .info-txt{margin-top:20px;padding:25px 30px;background: #f5f8fe;font-size: 15px;font-weight: normal;color: #202020;}
.goods .view .view-top .detail-info dl dd .info-txt + .info-txt {margin:5px 0 0 0;}
.goods .view .view-top .detail-info dl dd .info-txt span{font-weight: bold;}
.goods .view .view-top .detail-info dl.none-float dt{float: none;width:100%;}
.goods .view .view-top .detail-info dl.none-float dd{padding:0;margin-top:20px;}
.goods .view .view-top .detail-info dl.d-price {margin-top:30px;padding-top:30px;border-top:1px solid #e8e8e8;}

.goods .view .view-top .detail-info .option{margin-top:20px;}

.goods .view .view-top .detail-info .option li{position: relative;background: #f5f8fe;padding:20px 30px;display: flex;align-items: center;gap:20px;}
.goods .view .view-top .detail-info .option li + li{margin-top:5px;}
.goods .view .view-top .detail-info .option li .item-name{width: calc(100% - 167px);}
.goods .view .view-top .detail-info .option li .item-name strong{display: block;font-size: 16px;font-weight: 500;color: #202020;}
.goods .view .view-top .detail-info .option li .item-name p{margin-top:6px;font-size: 11px;font-weight: normal;color: #919090;}
.goods .view .view-top .detail-info .option li .item-quantity{display: flex;align-items: center;border:1px solid #e8e8e8;background: #fff;}
.goods .view .view-top .detail-info .option li .item-quantity input[type="number"]{display: inline-block;width:45px;height:28px;text-align: center; font-size: 14px;font-weight: 600;}
.goods .view .view-top .detail-info .option li .item-quantity button{display: flex;align-items:center;justify-content:center;width:30px;height:28px;}
.goods .view .view-top .detail-info .option li .item-quantity .decrease{border-right:1px solid #e8e8e8;}
.goods .view .view-top .detail-info .option li .item-quantity .decrease:before{content: "";display: inline-block;background: url(/_public/images/icon/ico_minus.svg) no-repeat;background-size: cover;width:12px;height:1px;}
.goods .view .view-top .detail-info .option li .item-quantity .increase{border-left:1px solid #e8e8e8;}
.goods .view .view-top .detail-info .option li .item-quantity .increase:before{content: "";display: inline-block;background: url(/_public/images/icon/ico_plus.svg) no-repeat;background-size: cover;width:13px;height:13px;}
.goods .view .view-top .detail-info .option li .item-quantity .del-option{display: inline-block;margin-left:18px;}
.goods .view .view-top .detail-info .option li .item-quantity .del-option img{display: block;}
.goods .view .view-top .detail-info .option li .item-price{position: absolute;top:50%;transform: translateY(-50%);right:35px;font-size: 16px;font-weight: 600;text-align: right;color: #202020;}
.goods .view .view-top .detail-info .option li .item-price p{ }
.goods .view .view-top .detail-info .option li .item-price span{display: block;margin-top:6px;font-size: 11px;font-weight: normal;color: #919090;}

.goods .view .view-top .detail-info .total{border-top:1px solid #e8e8e8;padding-top:30px;display: flex;justify-content: space-between;align-items: center;}
.goods .view .view-top .detail-info .total span{display:inline-block;font-size: 16px;font-weight: 500;color: #202020;}
.goods .view .view-top .detail-info .total strong{font-size: 28px;font-weight: 800;text-align: right;color: #0082b2;}

.goods .view .view-top .detail-info .colunm{}
.goods .view .view-top .detail-info .colunm .tit{font-size:12px;}
.goods .view .view-top .detail-info .colunm .item{margin-top:10px;}
.goods .view .view-top .detail-info .colunm .item .coupon_select_div{}
.goods .view .view-top .detail-info .colunm .item .coupon_select_div select{max-width:306px;width:100%; height:30px; border:1px solid #e3e3e3; font-size:12px; padding:0 40px 0 25px; background: url(/_public/images/@draft/select_icon02.png) no-repeat; background-position: 95% 50%;}
.goods .view .view-top .detail-info .colunm .item .coupon_select_div select option{}
.goods .view .view-top .detail-info .naverpay-box{display: flex;margin-top:20px;justify-content: flex-end;}
.goods .view .view-top .detail-info .button-group{display: flex;margin-top:30px;gap:10px;}
.goods .view .view-top .detail-info .button-group button{flex:1;display:flex;align-items:center;justify-content:center;height: 60px; font-size: 18px;font-weight: 600;gap:10px;}
.goods .view .view-top .detail-info .button-group button:disabled{color:#fff;background: #cdd2d5;border-color:#cdd2d5;}
.goods .view .view-top .detail-info .button-group button.btn-cart{background: #fff;border:1px solid #0082b2;color:#0082b2;}
.goods .view .view-top .detail-info .button-group button.btn-cart:before{content: "";display: inline-block;width:20px;height:20px;background: url(/_public/images/icon/ico_cart_blue.svg) no-repeat;background-size: cover;}
.goods .view .view-top .detail-info .button-group button.btn-pay{background: #0082b2;color:#fff;}
.goods .view .view-top .detail-info .button-group button.btn-pay:before{content: "";display: inline-block;width:20px;height:20px;background: url(/_public/images/icon/ico_chk_w.svg) no-repeat;background-size: cover;}

.goods .view .item-relation{margin-top:35px;}
.goods .view .item-relation .tit{padding:0 30px;font-size:22px;font-weight:500;color:#090909;}
.goods .view .item-relation .item-slide{margin-top:25px;padding:0 30px;position:relative;}
.goods .view .item-relation .item-slide .slick-slide{margin:0 7px;}
.goods .view .item-relation .item-slide .slick-slide .img{}
.goods .view .item-relation .item-slide .slick-slide .img img{width:100%;}
.goods .view .item-relation .item-slide .slick-slide .txt-box{padding:15px 0;}
.goods .view .item-relation .item-slide .slick-slide .txt-box .name{font-size:15px;font-weight:500;}
.goods .view .item-relation .item-slide .slick-slide .txt-box .price{margin-top:5px;font-size:15px;font-weight:600;}
.goods .view .item-relation .item-slide .slick-slide .txt-box .price s{display: inline-block;font-size:14px;color:#8e8e8e;margin-right:10px;font-weight:300;}
.goods .view .item-relation .item-slide .slick-arrow{position: absolute;top:50%;width:15px;height: 27px;background: url(/_public/images/@draft/arrow03.png) no-repeat;background-size: cover;font-size:0;}
.goods .view .item-relation .item-slide .slick-prev{left:0;transform: translateY(-50%) rotate(-180deg);}
.goods .view .item-relation .item-slide .slick-next{right:0;transform: translateY(-50%);}
.goods .view .benefit-box{margin-top:110px;}
.goods .view .benefit-box h3{font-size:15px;color:#343434;}
.goods .view .benefit-box figure{margin-top:20px;}
.goods .view .benefit-box figure img{display: block;}
.goods .view .view-bottom{margin-top:80px;}
.goods .view .view-bottom .goods-tab{display: flex;}
.goods .view .view-bottom .goods-tab a{flex: 1;display:flex;align-items:center;justify-content:center;height:60px;border-bottom: 1px solid #cecece;font-size: 18px;font-weight: normal;color: #231815;gap:4px;}
.goods .view .view-bottom .goods-tab a em{display:flex;align-items:center;justify-content:center;width:30px;height:25px; border-radius: 10px;border: solid 1px #ccc;font-size: 15px;font-weight: normal;text-align: center;color: #787878;}
.goods .view .view-bottom .goods-tab a.active{border-color:#231815;font-weight:bold;border-width:2px;}

.goods .view .view-bottom .tab-box{padding:40px 0 0;}
.goods .view .view-bottom .tab-box + .goods-tab{margin-top:80px;}
.goods .view .view-bottom .tab-box .inner{padding:0 60px;}
.goods .view .view-bottom .tab-box .img{text-align: center;}
.goods .view .view-bottom .tab-box .info-box + .info-box{margin-top:60px;}
.goods .view .view-bottom .tab-box .info-box .tit{font-size: 17px;font-weight: 500;color: #121212;}
.goods .view .view-bottom .tab-box .info-box table{margin-top:15px;table-layout: fixed;border-top: 1px solid #dedede;}
.goods .view .view-bottom .tab-box .info-box table tbody tr th{padding:15px;font-size: 15px;font-weight: normal;text-align: center;color: #121212;background:#fafafa;border-bottom:1px solid #dedede;}
.goods .view .view-bottom .tab-box .info-box table tbody tr td{padding:15px 20px;text-align:left;font-size: 15px;font-weight: normal;color: #242424;border-bottom:1px solid #dedede;}


.goods .view .view-bottom .tab-box .review{}
.goods .view .view-bottom .tab-box .review .scope{display: flex;}
.goods .view .view-bottom .tab-box .review .scope > div{flex:1;-ms-flex: 1;padding:20px 0;border-left:1px solid #f0f0f0;text-align: center;align-items: center;align-self:center;}
.goods .view .view-bottom .tab-box .review .scope > div:first-child{border-left:0;}
.goods .view .view-bottom .tab-box .review .scope .grade .score{margin-top:30px;font-size:54px;font-weight:600;}
.goods .view .view-bottom .tab-box .review .scope .grade .score em{display:inline-block;font-weight: 600;margin-left: 5px;font-size: 22px;}
.goods .view .view-bottom .tab-box .review .scope .grade .star{margin-top:37px;display:inline-block;width:200px;height:40px;background: url("/_public/images/@draft/sp_ico.png") no-repeat;background-size: 490px;}
.goods .view .view-bottom .tab-box .review .scope .grade .star.star0{background-position: 0 -225px;}
.goods .view .view-bottom .tab-box .review .scope .grade .star.star1{background-position: 0 -265px;}
.goods .view .view-bottom .tab-box .review .scope .grade .star.star2{background-position: 0 -305px;;}
.goods .view .view-bottom .tab-box .review .scope .grade .star.star3{background-position: -205px -225px;}
.goods .view .view-bottom .tab-box .review .scope .grade .star.star4{background-position: -205px -265px;}
.goods .view .view-bottom .tab-box .review .scope .grade .star.star5{background-position: -205px -305px;}
.goods .view .view-bottom .tab-box .review .scope .score-graph{font-size:0;}
.goods .view .view-bottom .tab-box .review .scope .score-graph > div{display:inline-block;margin:0 10px;text-align: center;}
.goods .view .view-bottom .tab-box .review .scope .score-graph > div em{display:block;font-size:15px;font-weight:500;}
.goods .view .view-bottom .tab-box .review .scope .score-graph > div em i{display:block;font-size:15px;font-weight:400;color:#8e8e8e;}
.goods .view .view-bottom .tab-box .review .scope .score-graph > div p{display:inline-block;position:relative;overflow: hidden;margin:0 0 10px;width:10px;height:100px;border-radius: 15px;background:#e5e5e5;}
.goods .view .view-bottom .tab-box .review .scope .score-graph > div p span{position:absolute;bottom:0;left:0;width:100%;background:#1e4ba0; border-radius: 15px;}
.goods .view .view-bottom .tab-box .review .scope .review-write{}
.goods .view .view-bottom .tab-box .review .scope .review-write .tit{font-size:13px;font-weight:bold;}
.goods .view .view-bottom .tab-box .review .scope .review-write .txt{margin-top:25px;font-size: 18px;color:#787878;font-weight:normal;}
.goods .view .view-bottom .tab-box .review .scope .review-write .review-write-button{display:inline-block;margin-top:29px;width:150px;line-height: 45px;font-weight:normal;background: #fff;border:1px solid #0082b2;text-align: center;color:#0082b2;font-size:16px;font-weight: normal;}
.goods .view .view-bottom .tab-box .review .satisfaction{display: flex;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;border-top:1px solid #f0f0f0;}
.goods .view .view-bottom .tab-box .review .satisfaction > div{flex:1;-ms-flex: 1;padding:40px 25px;}
.goods .view .view-bottom .tab-box .review .satisfaction > div strong{display:inline-block;width:75px;border:1px solid #090909;font-size:13px;font-weight:bold;text-align: center;border-radius: 25px;line-height: 35px;color:#090909;}
.goods .view .view-bottom .tab-box .review .satisfaction > div .satisfaction-graph{font-size:0;margin-top:33px;}
.goods .view .view-bottom .tab-box .review .satisfaction > div .satisfaction-graph + .satisfaction-graph{margin-top:15px;}
.goods .view .view-bottom .tab-box .review .satisfaction > div .satisfaction-graph em{font-size:12px;color:#090909;font-weight:normal;vertical-align: middle;display:inline-block;}
.goods .view .view-bottom .tab-box .review .satisfaction > div .satisfaction-graph .txt{width:100px;}
.goods .view .view-bottom .tab-box .review .satisfaction > div .satisfaction-graph .percent{width:40px;text-align: right;font-weight:600;}
.goods .view .view-bottom .tab-box .review .satisfaction > div .satisfaction-graph p{margin:0 15px;vertical-align: middle;position: relative;overflow: hidden;display:inline-block;width:170px;height:7px;border-radius: 15px;background: #e2e2e2; }
.goods .view .view-bottom .tab-box .review .satisfaction > div .satisfaction-graph p span{position: absolute;top:0;left:0;height:100%;background:#090909;}
.goods .view .view-bottom .tab-box .review .review-img{margin-top:50px;padding:25px 30px;border-top:1px solid #f0f0f0;}
.goods .view .view-bottom .tab-box .review .review-img .tit{font-size:15px;font-weight:bold;}
.goods .view .view-bottom .tab-box .review .review-img ul{font-size:0;margin-top:15px;}
.goods .view .view-bottom .tab-box .review .review-img ul li{cursor: pointer;display:inline-block;width:93px;margin-left:8px;}
.goods .view .view-bottom .tab-box .review .review-img ul li:first-child{margin-left:0;}
.goods .view .view-bottom .tab-box .review .review-img ul li img{width:93px;height:93px;display:block;}
.goods .view .view-bottom .tab-box .review .list{margin-top:25px;}
.goods .view .view-bottom .tab-box .review .list .top{position: relative;padding:15px 0;}
.goods .view .view-bottom .tab-box .review .list .top .sort{display: flex;gap:20px;}
.goods .view .view-bottom .tab-box .review .list .top .sort button{position:relative;display:inline-block;padding-left:10px;font-size: 15px;font-weight:500;color:#787878;}
.goods .view .view-bottom .tab-box .review .list .top .sort button:before{content: "";position: absolute;top:6px;left:0;width:4px;height:4px;border-radius: 100%;background: #aaa;}
.goods .view .view-bottom .tab-box .review .list .top .sort button.active{color:#2a3139;font-weight:bold;}
.goods .view .view-bottom .tab-box .review .list .top .sort button.active:before{background:#2a3139;}
.goods .view .view-bottom .tab-box .review .list .top .link{position:absolute;top:5px;right:0;width:140px;font-size:14px;color:#888;line-height: 35px;padding:0 15px;border-radius: 15px;border:1px solid #e7e7e7;}
.goods .view .view-bottom .tab-box .review .list .top .link:after{content: "";position:absolute;right:15px;top:10px;display:inline-block;width:15px;height:15px;background: url("/_public/images/@draft/sp_ico.png")no-repeat; background-size: 490px;background-position: -80px -140px;}
.goods .view .view-bottom .tab-box .review .list .review-list{border-top:2px solid #787878;}
.goods .view .view-bottom .tab-box .review .list .review-list > div{display: flex;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;padding:35px 15px;border-bottom:1px solid #f6f6f6;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col{width:1150px;position:relative;padding-right:125px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col:first-child{width:100px;padding:0;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .name{font-size:14px;font-weight:500;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .name em{display:block;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope{}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope .star{display:inline-block;width:105px;height:20px;background: url("/_public/images/@draft/sp_ico.png") no-repeat;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope .star.star0{background-position: -5px -350px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope .star.star1{background-position: -5px -375px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope .star.star2{background-position: -5px -400px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope .star.star3{background-position: -120px -350px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope .star.star4{background-position: -120px -375px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope .star.star5{background-position: -120px -400px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .scope .date{display:inline-block;position:relative;top:2px;margin-left:7px;font-size:14px;font-weight:500;vertical-align: middle;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .img{position:absolute;top:0;right:0;width:93px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .img img{width:93px;height:93px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .txt-box{margin-top:10px;position:relative;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .txt-box .option{font-size:14px;font-weight:500;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .txt-box .option + .option{margin-top:3px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .txt-box .review-txt{margin-top:10px;font-weight:400;height:22px;line-height: 22px;overflow:hidden;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .txt-box .review-txt.active{height:100%;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .review-satisfaction{margin-top:13px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .review-satisfaction p{font-size:12px;font-weight:400;color:#666;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .review-satisfaction p span{display: inline-block;margin-right:15px;width: 80px;border: 1px solid #090909;font-size: 12px;font-weight: 500;text-align: center;border-radius: 25px;line-height: 35px;color: #090909;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .review-satisfaction p + p{margin-top:10px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .more-button{display:inline-block;position: relative;padding-right:15px;font-size:13px;color:#666;margin-top:20px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .more-button:before{content: "";position:absolute;top: 1px;right: 0;display:inline-block;width:15px;height:15px;background: url("/_public/images/@draft/sp_ico.png") no-repeat;background-size: 490px;background-position: -20px -140px;}
.goods .view .view-bottom .tab-box .review .list .review-list > div .col .more-button.active:before{transform:rotate(-180deg);}

.goods .view .view-bottom .tab-box .goods-qna{}
.goods .view .view-bottom .tab-box .goods-qna .qna-top{text-align: center;}
.goods .view .view-bottom .tab-box .goods-qna .qna-top button{width:205px;line-height: 50px;font-size: 16px;font-weight: 600;background: #0082b2;color:#fff;}
.goods .view .view-bottom .tab-box .goods-qna .qna-top p{margin-top:45px;font-size:13px;}
.goods .view .view-bottom .tab-box .goods-qna .qna-top p span{display:inline-block;font-weight:600;}
.goods .view .view-bottom .tab-box .goods-qna dl{margin-top:25px;border-top:2px solid #787878;border-bottom:1px solid #cecece;}
.goods .view .view-bottom .tab-box .goods-qna dl dt{position:relative;display:flex;padding:0 45px 0 205px;line-height: 50px;border-top:1px solid #e3e3e3;font-size:12px;cursor: pointer;}
.goods .view .view-bottom .tab-box .goods-qna dl dt:first-child{border-top:0;}
.goods .view .view-bottom .tab-box .goods-qna dl dt .status{position:absolute;top:13px;left:35px;display:inline-block;width:100px;border-radius: 25px;line-height: 26px;text-align: center;font-size:12px;background:#f3f3f3;color:#000;font-weight:300;}
.goods .view .view-bottom .tab-box .goods-qna dl dt .status.complete{background:#202020;color:#fff;}
.goods .view .view-bottom .tab-box .goods-qna dl dt .subject{position:relative;display: inline-block;padding-left:25px;width:70%;}
.goods .view .view-bottom .tab-box .goods-qna dl dt .subject:before{content: "";display: inline-block;position: absolute;top:14px;left:0;width:20px;height:20px;background: url("/_public/images/@draft/sp_ico.png") no-repeat;background-position: -100px 0;}
.goods .view .view-bottom .tab-box .goods-qna dl dt .name{display: inline-block;width:20%;text-align: center;}
.goods .view .view-bottom .tab-box .goods-qna dl dt .date{display: inline-block;width:10%;text-align: center;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .txt{position:relative;padding:0 45px 0 205px;line-height: 50px;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .modify-group{font-size:0;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .modify-group .button{font-size:12px;display:inline-block;background:#f3f3f3;text-align: center;color:#333;width:50px;line-height: 30px;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .txt .modify-group .button:first-child{background:#1e4ba0;color:#fff;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .reply{background:#f3f3f3;position:relative;padding:0 45px 0 205px;line-height: 50px}
.goods .view .view-bottom .tab-box .goods-qna dl dd .reply .top{display:flex;font-size:12px;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .reply .top .subject{position:relative;width:70%;padding-left:25px;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .reply .top .subject:before{content: "";display: inline-block;position: absolute;top:12px;left:0;width:20px;height:20px;background: url("/_public/images/@draft/sp_ico.png") no-repeat;background-position: -120px 0;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .reply .top .name{width:20%;text-align: center;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .reply .top .date{width:10%;text-align: center;}
.goods .view .view-bottom .tab-box .goods-qna dl dd .reply .reply-txt{padding-left:25px;}
.goods .view .view-bottom .tab-box .noti-box{margin-top:30px;display: flex;align-items: flex-end;justify-content: space-between;padding:45px 90px;background: #f5f8fe;}
.goods .view .view-bottom .tab-box .noti-box .txt{}
.goods .view .view-bottom .tab-box .noti-box .txt h3{font-size: 28px;font-weight: bold;color: #202020;}
.goods .view .view-bottom .tab-box .noti-box .txt p{margin-top:10px;font-size: 16px;font-weight: normal;color: #787878;}
.goods .view .view-bottom .tab-box .noti-box a{display: flex;align-items:center;justify-content:center;width:107px;height:30px;border:1px solid #e8e8e8;background: #fff; font-size: 15px;font-weight: 500;text-align: center;color: #202020;border-radius: 15px;line-height: 28px;gap:10px;}
.goods .view .view-bottom .tab-box .noti-box a:after{content: "";position:relative;top:-1px;display: inline-block;width:15px;height:15px;background: url(/_public/images/icon/ico_view2.svg) no-repeat;background-size: cover;}

/* tablet */
@media all and (max-width:1280px) {
    .goods-list ul li{width:calc(33.3333% - 27px);}
    .category-tab{margin-top:20px;flex-wrap: wrap;gap:0;justify-content: flex-start;}
    .category-tab a{position:relative;top:1px;width:25%;line-height: 43px;border-bottom:1px solid #cdd2d5;}
}

/* mobile */
@media all and (max-width:1024px) {
    .category-tab{margin-top:0;}
    .category-tab a{width:33.3333%;font-size:14px;}
    .goods .top-group p{font-size:14px;}
    .goods .top-group select{font-size:14px;width:120px;height:35px;}
    .goods .top-group p strong{margin-left: 5px;}
    .goods-list ul{gap:50px 10px;}
    .goods-list ul li{width: calc(33.3333% - 7px);}
    .goods-list ul li .badge-new{width: 40px;height: 16px;font-size:12px;}
    .goods-list ul li .img .soldout-txt{font-size:14px;}
    .goods-list ul li .box h3{font-size:14px;line-height: 1.43;height:42px;}
    .goods-list ul li .box > em{font-size: 14px;}
    .goods-list ul li .box .bottom{margin-top:10px;bottom:10px;}
    .goods-list ul li .box .bottom .price{font-size:16px;}
    .goods-list ul li .box .bottom .price s{font-size:14px;}
    .goods-list ul li .box .soldout-badge{width:59px;}
    .goods-list ul li .box .bottom .btn-group .btn-cart{width:20px;height:20px;}
    .goods-list ul li .box .bottom .btn-group .like{width:20px;height:20px;}

    .goods .view{}
    .goods .view .view-top{flex-direction: column;gap:24px;border-top:0;padding-top:0;}
    .goods .view .view-top > div{max-width:100%;}
    .goods .view .navi-box{margin:0 -20px;padding:20px;background: #f5f4f2;}
    .goods .view .navi-box .breadcrumbs span{font-size:14px;}
    .goods .view .view-top .goods-img{max-width:100%;}
    .goods .view .view-top .detail-info .hgroup .ct-name{font-size:16px;}
    .goods .view .view-top .detail-info .hgroup em{font-size:15px;}
    .goods .view .view-top .detail-info .hgroup h3{font-size: 18px;}
    .goods .view .view-top .detail-info .hgroup p{font-size:14px;}
    .goods .view .view-top .detail-info .hgroup .sns-group .like{width:30px;height:30px;}
    .goods .view .view-top .detail-info .hgroup .sns-group .button-share{width:30px;height:30px;}
    .goods .view .view-top .detail-info dl dt{font-size:14px;width:80px;}
    .goods .view .view-top .detail-info dl dd{font-size:14px;padding:0 0 10px 80px}
    .goods .view .view-top .detail-info dl dd s{font-size:14px;}
    .goods .view .view-top .detail-info dl dd .txt{font-size:14px;margin-left: 10px;}
    .goods .view .view-top .detail-info dl dd .txt:before{top:2px;}
    .goods .view .view-top .detail-info dl dd select{font-size:14px;height:45px;}
    .goods .view .view-top .detail-info dl dd .info-txt {padding: 20px 25px;}
    .goods .view .view-top .detail-info .option li{padding:20px;justify-content: space-between;}
    .goods .view .view-top .detail-info .option li .item-price{display: none;}
    .goods .view .view-top .detail-info .option li .item-name strong{font-size:14px;}
    .goods .view .view-top .detail-info .total strong{font-size:21px;}
    .goods .view .view-top .detail-info .button-group{gap:10px;}
    .goods .view .view-top .detail-info .button-group button{height:50px;font-size:15px;}
    .goods .view .view-bottom .goods-tab a{font-size:15px;gap:2px;}
    .goods .view .view-bottom .goods-tab a em{width:24px;height:25px;font-size: 15px;}
    .goods .view .view-bottom{margin-top:40px;}
    .goods .view .view-bottom .tab-box .inner{padding:0;}
    .goods .view .view-bottom .tab-box{padding:20px 0 0;}
    .goods .view .view-bottom .tab-box .info-box table{margin-top:5px;}
    .goods .view .view-bottom .tab-box .info-box table tbody tr th{padding:12px;font-size:13px;}
    .goods .view .view-bottom .tab-box .info-box table tbody tr td{padding:12px 20px;font-size:13px;}
    .goods .view .view-bottom .tab-box .info-box .tit{font-size:15px;}
    .goods .view .view-bottom .tab-box .info-box + .info-box{margin-top:20px;}
    .goods .view .view-bottom .tab-box .info-box dl{margin-top:15px;}
    .goods .view .view-bottom .tab-box .info-box dl dt{font-size: 14px;font-weight: bold;}
    .goods .view .view-bottom .tab-box .info-box dl dd{margin-top:5px;padding: 10px; border: solid 1px #dedede;background-color: #fff; font-size: 13px;font-weight: normal;line-height: 1.46;color: #242424;}
    .goods .view .view-bottom .tab-box .info-box dl dd + dt{margin-top:15px;}
    .goods .view .view-bottom .tab-box .review .scope{flex-direction: column;}
    .goods .view .view-bottom .tab-box .review .scope > div{border:0;padding:0;}
    .goods .view .view-bottom .tab-box .review .scope .score-graph{display: none;}
    .goods .view .view-bottom .tab-box .review .scope .grade .score{margin-top:10px;font-size:38px;}
    .goods .view .view-bottom .tab-box .review .scope .grade .star{margin-top:10px;}
    .goods .view .view-bottom .tab-box .review .scope .review-write .txt{font-size:14px;}
    .goods .view .view-bottom .tab-box .review .scope .review-write .review-write-button{margin-top:20px;font-size:16px;}
    .goods .view .view-bottom .tab-box .noti-box{padding:30px;}
    .goods .view .view-bottom .tab-box .noti-box .txt h3{font-size:24px;}
    .goods .view .view-bottom .tab-box .noti-box .txt p{font-size:14px;}
}

/* mobile */
@media all and (max-width:768px) {
    .goods-list ul li{width:calc(50% - 5px);}

    .goods .view .view-top .goods-img .thumnail-wrap{padding:0 23px;margin-top:15px;}
    .goods .view .view-top .goods-img .swiper-button-next,
    .goods .view .view-top .goods-img .swiper-button-prev{width:16px;height:16px;}
    .goods .view .view-top .detail-info .hgroup .ct-name{font-size:14px;}
    .goods .view .view-top .detail-info .naverpay-box{justify-content: center;}
    .goods .view .view-bottom .tab-box .noti-box{padding:20px;flex-direction: column;align-items: flex-start;gap:20px;}
    .goods .view .view-bottom .tab-box .noti-box .txt h3{font-size:20px;}
    .goods .view .view-bottom .tab-box .noti-box .txt p{margin-top:5px;}
}