/* BASIC css start */
#header .logo_wrap .logo path {fill:#fff;}
#header .logo_wrap ul li a svg circle, #header .logo_wrap ul li a svg path {stroke:#fff;}
#header .logo_wrap ul li a.cateBtn svg rect {fill:#fff;}


#header.headroom.scroll .logo_wrap  .logo path {fill:#000;}
#header.headroom.scroll .logo_wrap ul li a svg circle, #header.headroom.scroll .logo_wrap ul li a svg path {stroke:#000;}
#header.headroom.scroll .logo_wrap ul li a.cateBtn svg rect {fill:#000;}
.headroom #header .logo path {fill:#fff;}
.headroom #header ul li a img{filter: invert(1);}
.headroom.scroll #header ul li a img{filter: invert(0);}
#contents{padding-top: 0 ! important;}

[class*="main_banner"] img{width: 100%;}
.main_tit{font-size: 18px; line-height: 24px; font-weight: 600; display: block; padding: 0 10px;}
.banner_slide .main_tit {margin-top:40px; margin-bottom:20px;}

[class*="main_"] .moreBtn,
.live_timer .moreBtn,.tab_product .moreBtn,.collection_grid .moreBtn,.grid_product .moreBtn,.coupon_banner .moreBtn,.promotion_slide .moreBtn,.banner_slide .moreBtn,.ranking_tab .moreBtn{margin-top: 24px; display: flex; flex-direction: row; align-items: center; justify-content: center; height: 48px; line-height: 48px; font-size: 14px; font-weight: 500; width: 100%; border: 1px solid #EBEBEB;     box-sizing: border-box;}
[class*="main_"] .moreBtn img,
.live_timer .moreBtn img,.tab_product .moreBtn img,.collection_grid .moreBtn img,.grid_product .moreBtn img,.coupon_banner .moreBtn img,.promotion_slide .moreBtn img,.banner_slide .moreBtn img,.ranking_tab .moreBtn img{width: 10px;}

.coupon_banner{margin-top:40px;}

.main_notice .main_tit,.main_event .main_tit{padding-top:30px; margin-bottom:24px;}


.main_banner_01 {position:relative; margin-top:-64px;}
.main_banner_01 .swiper-slide {position:relative;}
.main_banner_01 .swiper-slide .txt {position:absolute; bottom:0; padding:16px 12px; box-sizing:border-box; color:#fff; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); width: 100%;}
.main_banner_01 .swiper-slide .txt strong {display:block; font-size:20px; margin-bottom:8px; font-weight:700;}
.main_banner_01 .swiper-slide .txt p {font-size: 11px; font-weight: 600; line-height: 18px;}
.banner_slide {margin-bottom:60px;}
.main_banner_01 .swiper-pagination{ z-index: 10; color: #fff; width: fit-content; right: 16px; left: auto; top: auto; bottom: 16px; font-size: 12px;}


.cate_menu{padding: 0 20px; box-sizing: border-box; background-color: #fff; height: 38px; line-height: 38px;}
.cate_menu li{width: auto; font-weight: 500; font-size: 14px;}
.pointBlue{font-weight: 600; color: var(--pointBlue01);}

.cate_moreBtn{width: 50px; flex-shrink: 0;}
.cate_moreBtn a{display: flex; flex-direction: column; align-items: center; gap: 4px; width:100%;}
.cate_moreBtn span:first-of-type{background-color: var(--pointBlue01); width: 24px; height: 24px; border-radius: 555px; position: relative;}
.cate_moreBtn span:first-of-type img{width: 6px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.cate_moreBtn span:last-of-type{font-size: 12px; color: #555; font-weight: 400; line-height: 1.4; text-align: center;}


.main_banner_03{margin: 4px 0;}
.main_banner_03 .flexWrap > div{width: 50%;}
.live_timer,
.ranking_tab,
.tab_product,
.grid_product,
.coupon_banner{margin-bottom: 40px;}

.tab_product .cont_pr .desc .flexWrap,
.tab_product .cont_pr .desc .pr_sub,
.tab_product .cont_pr .desc .icons,
.tab_product .cont_pr .desc .strike,
.live_timer .cont_pr .desc .flexWrap,
.live_timer .cont_pr .desc .pr_sub,
.live_timer .cont_pr .desc .icons,
.live_timer .cont_pr .desc .flexWrap,
.live_timer .cont_pr .desc .strike,
.ranking_tab .normalList .desc{display: none;}

.tab_product .main_tit{margin-top: 40px;}

.tab_product .tit_01{margin-bottom: 24px;}
.tab_product .swiper-container{padding-right:40px; overflow: hidden;}
.tab_product .tab_menu{ padding: 16px 10px;}
.tab_product .tab_menu li{padding: 0 10px; box-sizing: border-box; border-radius: 5px; border: 1px solid #EBEBEB; color: #666666; cursor: pointer; font-size: 15px; font-weight: 500; line-height: 30px; height: 30px; width:auto;}
.tab_product .tab_menu li.activeTab{background-color: var(--pointBlue01); color: #fff; border: none;}
.tab_product .cont_pr {position: fixed; bottom:0; visibility: hidden;}
.tab_product .cont_pr.tabAlive { position: static; left: auto; visibility: visible;}
.tab_product .cont_pr{padding: 0 10px;}
.tab_product .cont_pr .desc .price{font-weight: 600; color: #111; font-size: 12px;}
.tab_product .cont_pr .desc .desc .sale_percent{font-size: 12px; font-weight: 700;}
.tab_product .cont_pr.tabAlive li:last-of-type{align-items: center; display: flex; justify-content: center; height:245px;}
.tab_product .swiper-pagination{ position: relative; height: 4px; background: #eee; margin-top: 20px;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--pointBlue01);}

.main_mini_wrap{padding: 20px 0 40px;}
.main_mini_wrap .displayFlex.alignCenter{padding-left: 10px;}
.main_mini_wrap ul{gap: 4px; scrollbar-width: none; padding: 0 20px; overflow-x: auto;}
.main_mini_wrap ul::-webkit-scrollbar {display: none;}
.main_mini_wrap ul:first-of-type{margin-bottom: 4px;}
.main_mini_wrap ul li{border: 1px solid #EBEBEB; border-radius: 4px; flex-shrink: 0; padding: 6px 14px;}
.main_mini_wrap ul li a{font-size: 13px; font-weight: 500; line-height: 18px;}
.main_mini_wrap ul li a img{margin-right: 4px; vertical-align:middle; max-width: 28px;}


.live_timer > .displayFlex,
.live_timer .cont_pr{padding: 0 10px; box-sizing: border-box;}
.live_timer > .displayFlex{margin-bottom: 16px; justify-content: space-between;}
.live_timer .icon {display:block; padding:0 10px; margin-bottom:5px;}
.live_timer .main_tit{margin-bottom: 8px;}
.live_timer .main_sub{font-size: 12px; font-weight: 500; line-height: 14px; color: #888; display: block; margin-bottom: 16px; padding: 0 10px; box-sizing: border-box;}
.live_timer .timeBox{ margin-right: 8px; font-size: 26px; font-weight: 600; color: var(--pointBlue01); padding: left 20px; box-sizing: border-box; line-height: 1.4;}
.live_timer .time_more_btn a{background-color: var(--pointBlue01); border: 1px solid #111; color: #fff; padding: 0 8px; font-size: 12px; font-weight: 500; height: 24px; line-height: 24px; display: block; position: relative; border-radius: 555px;   }
.live_timer .time_more_btn a:after{content: ''; width: 15px; height: 15px; background: url(http://ippngirl2006.phps.kr/snapskin/common/icon_plus_wh.svg) no-repeat center; display: block; background-size: contain; transform: translateY(25%); float: right; margin-left: 4px;}
.live_timer .cont_pr{padding-left: 10px;}
.live_timer .cont_pr .desc .price{font-weight: 600; color: #111; font-size: 12px;}
.live_timer .cont_pr .desc .desc .sale_percent{font-size: 12px; font-weight: 700;}

.ranking_tab .tab_menu{padding: 0 10px; box-sizing: border-box; margin-bottom: 16px;}
.ranking_tab .tab_menu li{color: #C8C8C8; font-size: 18px; line-height: 24px; font-weight: 600; transition: 0.3s;}
.ranking_tab .tab_menu li:not(:last-of-type){margin-bottom: 8px;}
.ranking_tab .tab_menu li.activeTab span{border-bottom: 1px solid #111;transition: 0.3s; color: #111; display: inline-block;}
.ranking_tab .thumbnail{border-radius: 0px ! important; margin-bottom: 0 ! important;}
.ranking_tab .cateBox{display: none;}
.ranking_tab .cateBox.tabAlive{display: flex; padding: 0 10px; align-items: center; justify-content: space-between; overflow-x: scroll; scrollbar-width:none;}
.ranking_tab .cateBox.tabAlive .prdList{display: grid; grid-template-columns: repeat(4.75px); gap: 3px;}
.ranking_tab .cateBox.tabAlive .prdList > div:nth-child(odd) {grid-row: 1;}
.ranking_tab .cateBox.tabAlive .prdList > div:nth-child(even) {grid-row: 2;}
.ranking_tab .cateBox.tabAlive .prdList > div{width: 105px;}
.ranking_tab .cateBox.tabAlive .prdList > div a img{width: 100%;}

.collection_grid .main_tit{margin-bottom: 16px;}
.collection_grid > .swiper{padding: 0 10px; margin-bottom: 80px;}
.collection_grid > .swiper > .swiper-wrapper > .swiper-slide::after{content: 'HIP & HIP 👍';pointer-events: none; display: flex;justify-content: center; align-items: center; font-size: 40px; font-weight: 400; color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.collection_grid > .swiper a{display:block;}
.collection_grid > .swiper img{width: 100%;}

.collection_grid > .swiper .collection_grid02{position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; box-sizing: border-box;}
.collection_grid > .swiper .collection_grid02 .swiper-slide a{display: flex; gap: 16px; align-items: center;}
.collection_grid > .swiper .collection_grid02 .thumb{max-width: 60px; border-radius: 0; margin-bottom: 0;}
.collection_grid > .swiper .collection_grid02 .desc .sale_percent,
.collection_grid > .swiper .collection_grid02 .desc .price{font-size: 12px; color: #EBEBEB; font-weight: 600; line-height: 1.4;}
.collection_grid > .swiper .collection_grid02 .desc .pr_sub,
.collection_grid > .swiper .collection_grid02 .desc .review,
.collection_grid > .swiper .collection_grid02 .flexWrap{display: none;}
.collection_grid > .swiper .collection_grid02 .desc .pr_name{color: #fff; max-width: 100px; text-overflow: ellipsis; word-break: break-all; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.collection_grid > .swiper .collection_grid02 .desc .strike{display: none;}


.coupon_banner .main_tit{margin-bottom: 16px;}
.coupon_banner .main_tit+div{padding: 0 10px; box-sizing: border-box;}
.coupon_banner .swiper-container{overflow:hidden;}
.coupon_banner .coupon_list {width:278px;}
.coupon_banner .coupon_list img{width:100%;}
.coupon_banner .coupon_list li{position: relative; margin-bottom:10px;}
.coupon_banner .coupon_list li a{display: block; background: url('http://ippngirl2006.phps.kr/snapskin/common/coupon_bg.png')no-repeat center / contain; width: 278px; height: 144px;}
.coupon_banner [class*="cp_list"]{position: absolute; top: 24px; left: 15px;}
.coupon_banner [class*="cp_list"] span.cp_hurdle{color: var(--pointBlue01); font-size: 12px; line-height: 14px; font-weight: 500; margin-bottom: 6px;}
.coupon_banner [class*="cp_list"] span.cp_tit{font-size: 16px; line-height: 18px; font-weight: 600; margin-bottom: 16px; color: #000;}
.coupon_banner [class*="cp_list"] span{font-size: 10px; font-weight: 400; line-height: 12px; display: block; margin-bottom: 3px; color: #ACACAC;}


.promotion_slide .top img{width: 100%;}
.promotion_slide .bottom{background: #fff; padding: 20px; box-sizing: border-box; margin: 0 20px; transform: translateY(-45px); border-radius: 8px;}
.promotion_slide .bottom .tit{ position: absolute; top: -85px; color: #fff; font-weight: 600; font-size: 28px; line-height: 1.3;}
.promotion_slide .bottom .btnAll{position: absolute; top: -35px; right: 0;}
.promotion_slide .bottom .btnAll a{ font-size: 12px; font-weight: 500; color: #fff;}
.promotion_slide .bottom .btnAll a:after{content: ''; display: inline-block; background: url('http://ippngirl2006.phps.kr/snapskin/common/icon_arrowRight_wh.svg')no-repeat center; background-size: contain; width: 10px; height: 10px; margin-left: 8px;}
.promotion_slide .bottom .items{display: grid; gap: 8px;}
.promotion_slide .bottom .item a{display: flex; flex-direction: row; gap: 16px; align-items: center;}
.promotion_slide .bottom .item a .thumbnail{margin-bottom: 0; flex-shrink: 0; width: 95px;}
.promotion_slide .bottom .item a .desc{padding: 5px 0; box-sizing: border-box; width: calc(100% - 111px); flex-shrink: 0;}
.promotion_slide .normalList .desc .flexWrap{display: none;}
.promotion_slide .normalList .desc .strike{display: none;}
.promotion_slide .normalList .desc .price{color: #111; font-weight: 600; margin-left: 4px;}

.grid_product{margin-bottom:40px;}
.grid_product .main_tit{padding-top: 40px; margin-bottom: 24px;}
.grid_product .items{display: flex; gap: 24px 4px; flex-wrap: wrap; flex-direction: row;}


/* ===== focus_banner (모바일: 배너 1개 + 상품 가로 swiper) ===== */
.focus_banner{margin-bottom: 40px;}
.focus_banner .main_tit{padding: 0 10px; margin-bottom: 16px;}
.focus_banner .banner{margin-bottom: 16px; padding: 0 10px;}
.focus_banner .banner img,.focus_banner .banner video{width: 100%; display: block; border-radius: 10px;}
.focus_banner .banner a{display: block;}
.focus_banner .txt-wrap{padding: 0 10px; margin-bottom: 16px;}
.focus_banner .txt-wrap strong{display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px;}
.focus_banner .txt-wrap p{font-size: 13px; color: #666; line-height: 1.4;}
.focus_banner .prd-swiper{padding: 0 10px; overflow: hidden;}
.focus_banner .prd-wrap{display: flex; margin: 0; padding: 0; list-style: none;}
.focus_banner .prd-wrap .swiper-slide,.focus_banner .prd-wrap .normalList{flex-shrink: 0; width: auto;}
.focus_banner .prd-wrap .thumbnail{border-radius: 8px; overflow: hidden;}
.focus_banner .prd-wrap .desc .flexWrap,
.focus_banner .prd-wrap .desc .icons,
.focus_banner .prd-wrap .desc .strike{display: none;}

/* ===== banner_slide (매크리 프로모션: 1.5 centered) ===== */
.banner_slide{margin-bottom: 60px;}
.banner_slide .main_tit{margin-top: 40px; margin-bottom: 20px; padding: 0 10px;}
.banner_slide > .swiper{overflow: hidden;}
.banner_slide .swiper-slide{width: auto;}
.banner_slide .swiper-slide a{display: block; overflow: hidden;}
.banner_slide .swiper-slide img{width: 100%; display: block;}


.review .new {
    color: #FF1774;
    font-weight: 700;
    font-size: 11px;
}

/* ===== 메인 팝업 ===== */
.popupLayer { position: relative; z-index: 9999; }
.popupLayer .main_popup { position: fixed; width: 80%; background: transparent; max-width: 600px; left: 50%; top: 45%; transform: translate(-50%, -50%); }
.popupLayer .main_popup .swiper-container { width: 100%; position: relative; overflow: hidden; }
.popupLayer .main_popup .swiper-slide { width: 100%; }
.popupLayer .main_popup .swiper-slide img { width: 100%; display: block; }
.popupLayer .main_popup .swiper-pagination{position: absolute; top: -25px; right: 0; background: #000; width: 40px; height: 20px; color: #fff; left: auto; font-size: 11px; line-height: 20px; border-radius: 20px;}


.popupLayer .popup-bottom {display: flex; justify-content: space-between; align-items: center; margin-top: 10px; min-height: 20px; line-height: 20px; font-size: 13px; cursor: pointer;}
.popupLayer .popup-bottom .todayClose{color: #ffffff; font-weight: 600; padding: 5px 15px; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9); border-radius: 5px; font-size: 12px;}
.popupLayer .popup-bottom .justClose{filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.9)); padding: 5px; border-radius: 5px;}
.popupLayer .popup-bottom .justClose svg{width: 20px; height: 20px; vertical-align: middle;}
.popup-dimmed{ z-index: 100; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);}
/* BASIC css end */