/* BASIC css start */
/* 상단 영역 투명처리 */
#container.mainArea {margin-top: 40px ;}
#header.mainAct .hdBtm {opacity:0; visibility:hidden; height:0; }
#header.mainAct {background: none;}
#header.mainAct .gnbArea .gnbmenu {height:55px}
#header.mainAct .gnbArea .menuBtn {background-image:url("/design/pinksisly/dizi/menu_ico_w.svg");}
#header.mainAct .gnbArea .searchBtn {background-image:url("/design/pinksisly/dizi/search_ico_w.svg");}
#header.mainAct .gnbArea .logo {background-image:url("/design/pinksisly/dizi/logo_w.png");background-size: 140px auto;}
#header.mainAct .gnbArea .cartBtn {background-image:url("/design/pinksisly/dizi/cart_ico_w.svg");}
#header.mainAct .gnbArea .myBtn {background-image:url("/design/pinksisly/dizi/mypage_ico_w.svg");}

/* 롤링배너 */
.mainSwiper {position:relative;overflow: hidden;}
.mainSwiper a{display: block; width: 100%}
.mainSwiper .swiper-slide a img{width: 100%}
.mainSwiper .swiper-pagination{bottom: 20px!important;height: 2px;}
.mainSwiper .swiper-pagination-bullet{width: 20px;height: 2px;border-radius: 0;margin: 0!important;background: #fff;opacity: 0.3;vertical-align: top;}
.mainSwiper .swiper-pagination-bullet-active{background: #fff; opacity: 1;}
/* //롤링배너 */

/* 카테고리 */
.mainCatgy01{display: table; width: 100%; background: #393939; }
.mainCatgy01 a{float: left; width: 25%; height: 32px; color: #ebebeb; font-size: 12px; line-height: 32px; text-align: center; border-right: 1px solid #545454; border-top: 1px solid #545454; box-sizing: border-box;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.mainCatgy01 a:nth-child(4n){border-right: none;}
.mainCatgy01 a:nth-child(1):nth-child(4){border-top: none;}
.mainCatgy01 a.pink{color: #f54c7e}
.mainCatgy01 a.yellow{color: #e4cc67}
.mainCatgy01 a.blue{color: #0bdfff}
.mainCatgy01 a.mint{color: #12d1a6}
.mainCatgy01 a.ice{color: #0bdfff}


.mainCatgy02{display: table; margin-top: 10px; width: 100%; }
.mainCatgy02 .list{display: table; width: 100%;}
.mainCatgy02 .bg01{background: #393939;}
.mainCatgy02 .bg01 a{color: #fff}
.mainCatgy02 .bg02{background: #393939;}
.mainCatgy02 .bg02 a{color: #fff}
.mainCatgy02 a.pink{color: #f54c7e}
.mainCatgy02 a.ice{color: #0bf1ff}
.mainCatgy02 a{float: left; width: 20%; height: 32px; font-size: 11px; line-height: 32px; text-align: center; letter-spacing: -0.5px; border-right: 1px solid #545454; border-top: 1px solid #545454; box-sizing: border-box; white-space: nowrap;text-overflow:ellipsis;overflow:hidden;}
.mainCatgy02 a:nth-child(5n){border-right: none;}
.mainCatgy01 img,
.mainCatgy02 img {vertical-align:middle;}
/* //카테고리 */

.topBnr{display: table; margin-top: 10px;}
.topBnr a{float: left; width: calc((100% - 5px)/2); margin-right: 5px;}
.topBnr a:last-child{margin-right: 0;}
.topBnr a img{width: 100%;}

.mainListBnr{width: 100%; margin-bottom: 10px;}
.mainListBnr img{width: 100%;}

.mainListTitle{padding: 0 15px; text-align: left;}
.mainListTitle .p01{padding-bottom: 11px; font-size: 24px; font-weight: bold;}
.mainListTitle .p02{padding-bottom: 18px; font-size: 12px}

.imgBnr{padding: 0 15px 20px;}
.imgBnr .p01{padding: 10px 0 0;color: #000;font-size: 26px;font-weight: 700;line-height: 35px;text-align: left;}
.imgBnr .p02{padding: 14px 0 28px;color: #333;font-size: 16px;line-height: 26px;text-align: left;}
.imgBnr a{display: block; width:110px; height: 45px; color: #fff; font-size: 11px; line-height: 45px; text-align: center; background-color: #000;}
.imgBnr a i{margin-left: 3px;}

.list_shopping1x .list_shoppingInfo{display: inline-block;position: absolute;top: 50%;transform: translateY(-50%);width: calc(100% - 110px);padding: 0 28px;box-sizing: border-box;}
.list_shopping1x .mainListBnr{margin-top: 65px;}
.list_shopping1x ul{margin-bottom: 0; padding: 0 15px; border-bottom: none;}
.list_shopping1x li:last-child{border-bottom: none;}
.list_shopping1x li a{padding: 20px 0!important;}
.list_shopping1x li img.listPic{max-width: 110px;width: auto;}
.list_shopping1x .listColor{position: absolute;top: 0;left: 28px;}
.list_shopping1x .listReview{right: 28px;top: 0;}
.list_shopping1x .listEtc {word-break: break-all;max-height: 28px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;}
.list_shopping1x .listName {margin-top: 20px;}
.list_shopping2x{margin-top: 65px;}

/* 타임세일 */
.timeImg{position: relative; margin-top: 40px; width: 100%;}
.timeImg img{width: 100%;}
.timeImg .count{position: absolute; top: 43%; transform: translateY(-50%); width: 100%;}
.timeImg .count .title{margin-bottom: 20px; color: #fff; font-size: 24px; font-weight: 600; text-align: center;}
.timeImg .count .time{color: #fff; font-size: 36px; font-weight: 500; text-align: center;}
.timeImg .count .time span{display: inline-block; width: 50px; text-align: center}
.timeImg .count .time span.colon{position: relative; top: -20px; width: 40px;}
.timeImg .count .time span.name{font-size: 10px; font-weight: 400;}

.timeList{position: relative; width: calc(100% - 30px); margin: 0 auto; background-color: #fff; margin-top: -16%;}
.timeList ul{padding: 0 20px;}
.timeList .list_shoppingInfo{padding-right: 0;}
.timeList .listDcPrice{position: absolute; top: 0; font-size: 20px;}
.timeList .listColor,
.timeList .listReview {display:none;}
.timeList .listName{margin-top: 22px;}

.timeListMore button{width: calc(100% - 30px); margin: 0 auto; height: 45px; color: #fff; font-size: 11px; border: none; background-color: #000;}
.timeListMore button i{position: relative; top: 1px;}
/* //타임세일 */

/* 리뷰 배너 */
.reviewBnr{margin-top: 65px; padding: 0 10px;}
.reviewBnr .mainListTitle{padding: 0 5px;}
.reviewBnr a{display: block;}
.reviewBnr a img{width: 100%}
/* //리뷰 배너 */

/* 실시간 인기 해시태그 */
.tag_shopping{margin-top: 45px; padding: 60px 0 65px; background-color: #ececec; text-align: left; overflow: hidden;}
.tag_shopping .title{padding: 0 15px; font-size: 24px; font-weight: bold; line-height: normal; box-sizing: border-box;}
.tagSwiper.swiper {padding: 5px 15px 15px; box-sizing: border-box;}
.tagSwiper .swiper-slide{width: auto}
.tagSwiper button{background: none; border: none; font-size:12px; color: #979797;}
.tagSwiper button.on{color: #222;}
.tagListArea{display: none;}
.tagListArea.on{display: block;}
.tagListArea .swiper{padding: 0 15px 40px}
.tagListArea .swiper-slide{width: 45%; margin-right: 10px;}
.tagListArea .listPic{width: 100%;}
.tagListArea .listEtc{border-top: 1px solid #ddd;}
/* //실시간 인기 해시태그 */

/* 회원가입 */
.joinArea{background-color: #fe6f5f; margin-top: 65px; padding: 35px 0}
.joinArea .p01{color: #fff; font-size: 16px; text-align: center;}
.joinArea .p02{color: #fff; font-size: 12px; text-align: center; padding:16px 0 18px;}
.joinArea .link{display: table; margin: 0 auto;}
.joinArea .link a{width: 90px; height: 35px; line-height: 35px; float: left; box-sizing: border-box; line-height: 33px; text-align: center;}
.joinArea .link .a01{margin-right: 2px; color: #fff; border: 1px solid #fff;}
.joinArea .link .a02{color: #fe6f5f; background-color: #fff; border: 1px solid #fff;}
/* 회원가입 */

.snap_review_count {
    float: left;
    font-size: 10px;
    color: #FE6F5F;
    display: block;
    position: absolute;
    top: 7px;
    right: 0;
}

.snowfall-flakes{ background: #f6f6f6 !important; }
.sakura {z-index:10000;position:fixed !important}


.main_popup_box { position: fixed; bottom: -100%; left: 0;  width: 100%; transition: all 0.3s; z-index:9999999999999}
.main_popup_box.show { bottom: 20px; animation: bounce 0.8s ease-out forwards; }
.main_popup_box .main_popup_inner { margin: 0 auto; text-align: center; position: relative; box-sizing: border-box; width: 100%; }
.main_popup_box #today_close {display: flex;align-items: center;justify-content: center;position: absolute;top: 6px;right:17px;background: #fff;border-radius: 100%;padding: 4px;width: 24px;height: 24px;border:none;z-index: 10;}
.main_popup_box .main_popup_txt {}
.main_popup_box .main_popup_txt a {display:block; width:95%; margin:0 auto; }
.main_popup_box .main_popup_txt a img { width: 100%; border-radius:10px }


@keyframes bounce {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	50% {
		transform: translateY(-15%);
		opacity: 1;
	}
	70% {
		transform: translateY(5%);
	}
	90% {
		transform: translateY(-5%);
	}
	100% {
		transform: translateY(0);
	}
}

/* BASIC css end */