/* 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;}
.main_banner_wrap .main_tit {margin-top:40px; margin-bottom:20px;}

[class*="main_"] .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{width: 10px;}

.main_coupon_wrap{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;}
.main_banner_wrap {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%;}
.main_time_wrap,
.main_cate_wrap,
.main_new_wrap,
.main_real_wrap,
.main_coupon_wrap{margin-bottom: 40px;}

.main_new_wrap .cont_pr .desc .flexWrap,
.main_new_wrap .cont_pr .desc .pr_sub,
.main_new_wrap .cont_pr .desc .icons,
.main_new_wrap .cont_pr .desc .strike,
.main_time_wrap .cont_pr .desc .flexWrap,
.main_time_wrap .cont_pr .desc .pr_sub,
.main_time_wrap .cont_pr .desc .icons,
.main_time_wrap .cont_pr .desc .flexWrap,
.main_time_wrap .cont_pr .desc .strike,
.main_cate_wrap .normalList .desc{display: none;}

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

.main_new_wrap .tit_01{margin-bottom: 24px;}
.main_new_wrap .swiper-container{padding-right:40px; overflow: hidden;} 
.main_new_wrap .tab_menu{ padding: 16px 10px;}
.main_new_wrap .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;}
.main_new_wrap .tab_menu li.activeTab{background-color: var(--pointBlue01); color: #fff; border: none;}
.main_new_wrap .cont_pr {position: fixed; bottom:0; visibility: hidden;}
.main_new_wrap .cont_pr.tabAlive { position: static; left: auto; visibility: visible;}
.main_new_wrap .cont_pr{padding: 0 10px;}
.main_new_wrap .cont_pr .desc .price{font-weight: 600; color: #111; font-size: 12px;}
.main_new_wrap .cont_pr .desc .desc .sale_percent{font-size: 12px; font-weight: 700;}
.main_new_wrap .cont_pr.tabAlive li:last-of-type{align-items: center; display: flex; justify-content: center; height:245px;}
.main_new_wrap .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;}


.main_time_wrap > .displayFlex,
.main_time_wrap .cont_pr{padding: 0 10px; box-sizing: border-box;}
.main_time_wrap > .displayFlex{margin-bottom: 16px;}
.main_time_wrap .icon {display:block; padding:0 10px; margin-bottom:5px;}
.main_time_wrap .main_tit{margin-bottom: 8px;}
.main_time_wrap .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;}
.main_time_wrap .timeBox{ margin-right: 8px; font-size: 32px; font-weight: 600; color: var(--pointBlue01); padding: left 20px; box-sizing: border-box; line-height: 1.4;}
.main_time_wrap .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;   }
.main_time_wrap .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;}
.main_time_wrap .cont_pr{padding-left: 10px;}
.main_time_wrap .cont_pr .desc .price{font-weight: 600; color: #111; font-size: 12px;}
.main_time_wrap .cont_pr .desc .desc .sale_percent{font-size: 12px; font-weight: 700;}

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

.main_slide_wrap .main_tit{margin-bottom: 16px;}
.main_slide_wrap > .swiper{padding: 0 10px; margin-bottom: 80px;}
.main_slide_wrap > .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%;.main_slide_wrap > .swiper > .swiper-wrapper > .swiper-slide::after}
.main_slide_wrap > .swiper a{display:block;}
.main_slide_wrap > .swiper img{width: 100%;}

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


.main_coupon_wrap .main_tit{margin-bottom: 16px;}
.main_coupon_wrap .main_tit+div{padding: 0 10px; box-sizing: border-box;}
.main_coupon_wrap .swiper-container{overflow:hidden;}
.main_coupon_wrap .coupon_list {width:278px;}
.main_coupon_wrap .coupon_list img{width:100%;}
.main_coupon_wrap .coupon_list li{position: relative; margin-bottom:10px;}
.main_coupon_wrap .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;}
.main_coupon_wrap [class*="cp_list"]{position: absolute; top: 24px; left: 15px;}
.main_coupon_wrap [class*="cp_list"] span.cp_hurdle{color: var(--pointBlue01); font-size: 12px; line-height: 14px; font-weight: 500; margin-bottom: 6px;}
.main_coupon_wrap [class*="cp_list"] span.cp_tit{font-size: 16px; line-height: 18px; font-weight: 600; margin-bottom: 16px; color: #000;}
.main_coupon_wrap [class*="cp_list"] span{font-size: 10px; font-weight: 400; line-height: 12px; display: block; margin-bottom: 3px; color: #ACACAC;} 


.main_more_wrap .top img{width: 100%;}
.main_more_wrap .bottom{background: #fff; padding: 20px; box-sizing: border-box; margin: 0 20px; transform: translateY(-45px); border-radius: 8px;}
.main_more_wrap .bottom .tit{ position: absolute; top: -85px; color: #fff; font-weight: 600; font-size: 28px; line-height: 1.3;}
.main_more_wrap .bottom .btnAll{position: absolute; top: -35px; right: 0;}
.main_more_wrap .bottom .btnAll a{ font-size: 12px; font-weight: 500; color: #fff;}
.main_more_wrap .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;}
.main_more_wrap .bottom .items{display: grid; gap: 8px;}
.main_more_wrap .bottom .item a{display: flex; flex-direction: row; gap: 16px; align-items: center;}
.main_more_wrap .bottom .item a .thumbnail{margin-bottom: 0; flex-shrink: 0; width: 95px;}
.main_more_wrap .bottom .item a .desc{padding: 5px 0; box-sizing: border-box; width: calc(100% - 111px); flex-shrink: 0;}
.main_more_wrap .normalList .desc .strike{display: none;}
.main_more_wrap .normalList .desc .price{color: #111; font-weight: 600; margin-left: 4px;}

.main_recommend_wrap{margin-bottom:40px;}
.main_recommend_wrap .main_tit{margin-bottom: 24px;}
.main_recommend_wrap .items,.main_real_wrap .items{display: flex; gap: 24px 4px; flex-wrap: wrap; flex-direction: row;}

.main_real_wrap .main_tit{padding-top: 40px; margin-bottom: 24px;}

/* BASIC css end */