/*BEST 카테고리 페이지 20230314*/
.event0detail .event-cate{padding-top : 50px;}
.event-detail.section-basic .tab-box > div:first-child{display : flex; align-items : center; justify-content : space-between;}
.event-detail.section-basic .tab-box > div:first-child h3{font-size : 20px; font-weight : 700; line-height : 1.45;}
.event-detail .tab-box > div:first-child .btnWrap{display : inline-flex; align-items : center; justify-content : flex-end; gap : 0 6px;}
.event-detail .tab-box > div:first-child .btnWrap button{display : inline-flex; width : 56px; height: 36px; align-items : center; justify-content : center; font-size : 14px; font-weight : 400; color : #000; background : #E9E0E0; border-radius : 30px;}
.event-detail .tab-box > div:first-child .btnWrap button.active{background : #000; color : #fff;}

@media screen and (min-width : 1160px){
    .hv-header .sub-gnb.on .menu ul li.d2:nth-child(2){color: #ed174d;}
    .main-top-cate{border-bottom : none;}
    .section-basic.event-detail .table-notice{margin-top : 60px;}
    .event-detail.section-basic .tab-box > div:first-child h3{font-size : 32px; font-weight : 400;}
    .event-detail .event-cate .grid{margin-top : 20px;}
    .event-detail .tab-box > div:first-child .btnWrap{gap : 0 7px;}
    .event-detail .tab-box > div:first-child .btnWrap button{width : 56px; font-size : 16px;}

    .hundred-count{padding-right: 5px;}
}

@media screen and (max-width: 1159px){
    .event-detail.section-basic .tab-box > div:first-child{ margin-bottom: 19px; }
}
/*BEST 카테고리 페이지 20230314*/

/*BEST 카테고리 추가 2023-10-12*/
/*모바일*/
@media screen and (max-width: 1159px){
    .mo-only{display: inline-block;}
    .pc-only{display: none;}

    .hv-sub-BestBanner{width: 100%;}
    .hv-sub-BestBanner .page-head-text{
        text-align: center; font-family: 'PaperlogyEn', 'Noto Sans KR'; font-size: 45px; font-style: normal; font-weight: 300; line-height: 55px; letter-spacing: -0.6px; height: 63px; margin-bottom: 21px;
    }
    .hv-sub-BestBanner .best-category-wrap:not(:last-child){margin-bottom: 60px;}
    .hv-sub-BestBanner .best-category-wrap:last-child{margin-bottom: 58px;}
    .hv-sub-BestBanner .best-category-wrap h4, .hv-sub-BestBanner .best-category-wrap h2{text-align: left; font-family: "Noto Sans KR"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 20px; letter-spacing: -0.6px; padding-left: 20px; margin-bottom: 29px;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst{position: relative; margin-bottom: 20px;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-card-num{position: absolute; left: 20px; top: 8px; font-family: "Roboto"; font-size: 26px; font-style: normal; font-weight: 700; line-height: 35px; letter-spacing: -0.6px; border-bottom: 1px solid #000; z-index: 1;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area{position: relative;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .img-wrap{background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.35) 100%);}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .img-wrap::before{position: absolute; z-index: 1; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .product-info-area{
        position: absolute; left: 20px; right: 20px; bottom: 33px; color: #FFFFFF; font-family: "Noto Sans KR"; font-style: normal; z-index: 5;
    }
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .product-info-area .brand-name{font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: -0.6px; font-style: normal;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .product-info-area .product-name{
        font-size: 20px; font-weight: 500; line-height: 29px; letter-spacing: -0.6px; margin-bottom: 16px;
    }
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .product-info-area .cost-area{display: flex; justify-content: flex-start; align-items: baseline;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .product-info-area .cost-area .cost-text2{font-family: "Roboto"; font-size: 20px; font-weight: 700; line-height: 29px; letter-spacing: -0.6px; display: flex; justify-content: center; align-items: baseline;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .product-info-area .cost-area .cost-text2 span{font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.6px;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .product-info-area .cost-area .cost-text1{opacity: 0.8; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.6px; margin-left: 4px; display: flex; justify-content: center; align-items: baseline;}
    .hv-sub-BestBanner .best-category-wrap .gradeFirst .product-area .product-info-area .cost-area .cost-text1 span{text-decoration-line: line-through; margin-left: 2px; font-family: "Roboto";}

    .hv-sub-BestBanner .best-category-wrap .beside-wrap{padding: 0 20px; width: 100%;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap:not(:last-child){margin-bottom: 16px}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area{position: relative; color: #000; display: flex; justify-content: space-between; align-items: center; gap: 0 16px;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area:not(:last-child){margin-bottom: 16px;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-card-num{position: absolute; left: 8px; top: 6px; font-family: "Roboto"; font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: -0.6px; z-index: 5;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .img-wrap{position: relative; flex: 0 0 120px; background-blend-mode: multiply;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-info-area{font-family: "Noto Sans KR"; color: #000; letter-spacing: -0.6px; width: 100%;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-info-area .brand-name{font-size: 12px; font-weight: 700; line-height: 18px; font-style: normal;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-info-area .product-name{font-size: 14px; font-weight: 400; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; word-break: break-all; height: 40px; max-height: 40px; margin-bottom: 8px;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-info-area .cost-area{display: flex; justify-content: flex-start; align-items: baseline;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-info-area .cost-area .cost-text2{font-family: "Roboto"; font-size: 20px; font-weight: 700; line-height: 29px; display: flex; justify-content: center; align-items: baseline;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-info-area .cost-area .cost-text2 span{font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height: 20px;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-info-area .cost-area .cost-text1{color: #A9A9A9; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height: 20px; display: flex; justify-content: center; align-items: baseline; margin-left: 4px;}
    .hv-sub-BestBanner .best-category-wrap .beside-wrap .product-area .product-info-area .cost-area .cost-text1 span{font-family: "Roboto"; text-decoration-line: line-through; margin-left: 2px;}

    /*더보기 버튼*/
    .hv-sub-BestBanner .button-wrap{margin: 35px 20px 0; border: 1px solid #4A4C58; border-radius: 8px; }
    .hv-sub-BestBanner .button-wrap .more-button{font-family: "Noto Sans KR"; font-size: 16px; font-weight: 500; line-height: normal; margin: 15px 145px;}
    .hv-sub-BestBanner .line{height: 1px; background: #D9DADB; margin: 0 20px 23px;}

}

/*PC*/
@media screen and (min-width: 1160px){
    .mo-only{display: none;}
    .pc-only{display: inline-block;}

    .hv-sub-BestBanner2{display: flex; position: relative; width: 100%;}
    .hv-sub-BestBanner2 .inner-wrap{width: 1160px; margin: 0 auto; display: flex;}
    .hv-sub-BestBanner2 .inner-wrap .total-wrap{display: flex; width: 1540px; margin: 0 auto;}
    .hv-sub-BestBanner2 .fixed-slide{width: 396px; max-width: 396px;height: 462px;left: 352px; z-index: 100;background-color: #FFFFFF; padding-left: 28px; box-sizing: border-box;}
    .hv-sub-BestBanner2 .fixed-slide .tit-area {width: 396px; height: 99px; text-align: left; margin-bottom: 24px;}
    .hv-sub-BestBanner2 .fixed-slide .tit-area .head-text{
        font-family: 'PaperlogyEn', 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 55px; line-height: 65px; letter-spacing: -0.6px;
    }
    .hv-sub-BestBanner2 .fixed-slide .tit-area span{
        font-weight: 300;
        font-size: 24px;
        line-height: 34px;
        letter-spacing: -0.6px;
    }
    .hv-sub-BestBanner2 .fixed-slide .tit-area p{ font-style: normal; font-weight: 350; font-size: 24px; line-height: 34px; letter-spacing: -0.6px;}
    .hv-sub-BestBanner2 .fixed-slide ul{display: flex; flex-wrap: wrap; list-style: none;}
    .hv-sub-BestBanner2 .fixed-slide ul li button{height : 52px; border-radius : 1002px; border: 1px solid#E1E1E1; justify-items: center; align-items: center; text-align: center; font-family: "Noto Sans KR"; font-weight: 500; font-size: 18px; line-height: 28px; letter-spacing: -0.6px; color: #A9A9A9; padding: 0 24px; margin-right: 4px; margin-top: 4px;}
    .hv-sub-BestBanner2 .fixed-slide ul li button .category-title{
        text-align: center; font-weight: 500; font-size: 18px; line-height: 28px; letter-spacing: -0.6px; color: #A9A9A9; white-space: nowrap;
    }
    .hv-sub-BestBanner2 .fixed-slide ul li button:hover, .hv-sub-BestBanner2 .fixed-slide ul .active button{background : #000; color : #fff; border : 1px solid #000;}
    .hv-sub-BestBanner2 .fixed-slide ul li button:hover .category-title, .hv-sub-BestBanner2 .fixed-slide ul .active button .category-title{
        color: #fff;
    }

    .hv-sub-BestBanner2 .swiper{width: 1160px; margin: 0 auto;}
    .hv-sub-BestBanner2 .swiper-wrapper{margin-bottom: 64px;}
    .hv-sub-BestBanner2 .swiper .swiper-scrollbar{ height: 1px; }
    .hv-sub-BestBanner2 .swiper-button-next{background: url("/resources/images/renewal_main/pc/arrow-next.png") no-repeat 50% 50%; position: absolute; right: 64px; top: 50%; background-size: 100% 100%; width: 56px; height: 56px; z-index: 100;}
    .hv-sub-BestBanner2 .swiper-button-prev{background: url("/resources/images/renewal_main/pc/arrow-prev.png") no-repeat 50% 50%; position: absolute; left: 42px; top: 50%; background-size: 100% 100%; width: 56px; height: 56px; z-index: 100;}

    .hv-sub-BestBanner2 .swiper .swiper-slide{height: 462px; }
    .hv-sub-BestBanner2 .swiper .swiper-slide .prdt-area{width: 368px !important ; height: 462px; display: block; background-color: #F0F0F0; background-blend-mode: multiply; position: relative;}
    .hv-sub-BestBanner2 .swiper .btn-wrap{width: 120px !important; height: 120px; background-color: #4A4C58; border-radius: 50%; display: flex; justify-items: center; align-items: center; margin-top: 171px; display: block;}
    .hv-sub-BestBanner2 .swiper .btn-wrap .btn-text{font-family: "Noto Sans KR"; font-weight: 300; font-size: 16px; line-height: 26px; letter-spacing: -0.6px; color: #FFFFFF; margin-top: 28px;}
    .hv-sub-BestBanner2 .swiper .btn-wrap .best-arrow{width: 30px;}

    .hv-sub-BestBanner2 .swiper .img-wrap{width: 360px; height: 312px;}
    .hv-sub-BestBanner2 .swiper .img-wrap img{width: 100%; height: 312px; object-fit: cover;}

    .hv-sub-BestBanner2 {position: relative; padding-top: 56px;}
    .hv-sub-BestBanner2  .slide-num{font-style: normal; font-family: "Roboto"; font-weight: 700; font-size: 26px; line-height: 35px; letter-spacing: -0.6px; border-bottom: 1px solid #000; text-align: left; position: absolute; left: 24px; top: 24px; z-index: 100;}
    .hv-sub-BestBanner2  .bg-wrap{min-height: 462px; height: 462px; position: absolute;}
    .hv-sub-BestBanner2  .bg-wrap img{display: block; width: 100%; height: 100%; object-fit: cover;}
    .hv-sub-BestBanner2  .product-info-area{z-index: 100; max-width: 296px; position: absolute; bottom: 15px; left: 20px; text-align: left}
    .hv-sub-BestBanner2  .product-info-area em{width: max-content; max-width: 296px; height: 20px; font-family: "Noto Sans KR"; font-style: normal; font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: -0.6px; background-color: #F0F0F0; padding: 0 3px; margin-bottom: 5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap: break-word;}
    .hv-sub-BestBanner2  .product-info-area p{width: max-content; max-width: 296px; height: 56px; max-height: 56px !important; margin-bottom: 32px;}
    .hv-sub-BestBanner2  .product-info-area p span{width: max-content; max-width: 296px; height: max-content; max-height: 56px !important; max-height: 56px !important; font-family: "Noto Sans KR"; font-style: normal; font-weight: 300; font-size: 18px; line-height: 28px; letter-spacing: -0.6px;background-color: #F0F0F0; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-wrap: break-word; word-break: keep-all;}
    .hv-sub-BestBanner2  .product-info-area .cost-area{width: max-content; font-family: "Roboto"; font-weight: 700; font-size: 24px; line-height: 34px; letter-spacing: -0.6px; background-color: #F0F0F0; padding-left: 5px; display: flex; justify-items: center; align-items: center; padding-right: 5px;}
    .hv-sub-BestBanner2  .product-info-area .cost-area strong{display: flex; justify-items: center; align-items: center; margin-right: 4px;}
    .hv-sub-BestBanner2  .product-info-area .cost-area strong > span{font-family: "Noto Sans KR"; font-weight: 300; font-size: 18px; line-height: 28px; letter-spacing: -0.6px;}
    .hv-sub-BestBanner2  .product-info-area .cost-area .cost_text1{font-family: "Noto Sans KR"; font-size: 18px; line-height: 28px; font-weight: 300; letter-spacing: -0.6px; color: #767676; display: flex; justify-items: center; align-items: center;  margin-left: 14px;}
    .hv-sub-BestBanner2  .product-info-area .cost-area .cost_text2{font-family: "Roboto"; font-weight: 300; font-size: 18px; line-height: 28px; letter-spacing: -0.6px; color: #767676;}

    .hv-sub-BestBanner2 .styleshot{position: relative;}
    .hv-sub-BestBanner2 .styleshot .slide-num{font-style: normal; font-family: "Roboto"; font-weight: 700; font-size: 26px; line-height: 35px; letter-spacing: -0.6px; border-bottom: 1px solid #000; text-align: left; position: absolute; left: 20px; top: 20px; z-index: 100;}
    .hv-sub-BestBanner2 .styleshot .bg-wrap{min-height: 462px; height: 462px; position: absolute;}
    .hv-sub-BestBanner2 .styleshot .bg-wrap img{display: block; width: 100%; height: 100%; object-fit: cover;}
    .hv-sub-BestBanner2 .styleshot .product-info-area{z-index: 100; max-width: 296px; position: absolute; bottom: 15px; left: 20px; text-align: left}
    .hv-sub-BestBanner2 .styleshot .product-info-area em{width: max-content; max-width: 296px; height: 20px; font-family: "Noto Sans KR"; font-style: normal; font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: -0.6px; background: rgba(255, 255, 255, 0.6); padding: 0 3px; margin-bottom: 5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap: break-word;}
    .hv-sub-BestBanner2 .styleshot .product-info-area p{width: max-content; max-width: 296px; height: 56px; max-height: 56px !important; margin-bottom: 32px;}
    .hv-sub-BestBanner2 .styleshot .product-info-area p span{width: max-content; max-width: 296px; height: max-content; max-height: 56px !important; max-height: 56px !important; font-family: "Noto Sans KR"; font-style: normal; font-weight: 300; font-size: 18px; line-height: 28px; letter-spacing: -0.6px; background: rgba(255, 255, 255, 0.6); padding: 0 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-wrap: break-word; word-break: keep-all;}
    .hv-sub-BestBanner2 .styleshot .product-info-area .cost-area{width: max-content; font-family: "Roboto"; font-weight: 700; font-size: 24px; line-height: 34px; letter-spacing: -0.6px;background: rgba(255, 255, 255, 0.6); padding-left: 5px; display: flex; justify-items: center; align-items: center; padding-right: 5px;}
    .hv-sub-BestBanner2 .styleshot .product-info-area .cost-area strong{display: flex; justify-items: center; align-items: center; margin-right: 4px; font-weight: 700; font-size: 24px; line-height: 34px; letter-spacing: -0.6px;}
    .hv-sub-BestBanner2 .styleshot .product-info-area .cost-area strong > span{font-family: "Noto Sans KR"; font-weight: 300; font-size: 18px; line-height: 28px; letter-spacing: -0.6px;}
    .hv-sub-BestBanner2 .styleshot .product-info-area .cost-area .cost_text1{font-family: "Noto Sans KR"; font-size: 18px; line-height: 28px; font-weight: 300; letter-spacing: -0.6px; color: #767676; display: flex; justify-items: center; align-items: center; margin-left: 14px;}
    .hv-sub-BestBanner2 .styleshot .product-info-area .cost-area .cost_text2{font-family: "Roboto"; font-weight: 300; font-size: 18px; line-height: 28px; letter-spacing: -0.6px; color: #767667; margin-left: 2px; text-decoration-line: line-through; }
}
/* Issue_6 : 첫 화면 eager 이미지를 감싼 <picture class="bp">(반대편 breakpoint 는 투명 이미지) 는 레이아웃에 영향을 주지 않도록 */
.hv-sub-BestBanner picture.bp, .hv-sub-BestBanner2 picture.bp{display: contents;}