
@media screen and (min-width:360px) {
	.hidden-xxs{display:block}
	.sidenav .user b{max-width:7em}
	.form-group .frm-radio+.frm-txt{margin-right:14px}
	.lst-cate strong{margin-bottom:21px}
	.sort-circle{margin-left:14px}
	.btn-like-pink{margin:0 14px}
	.ziplist{max-height:528px}
	.zip-srch>div{margin-bottom:28px}
	.zip-srch>div+div{margin:-14px auto 28px}
	.adr-bx{top:28px}
	.control-label{font-size:20px}
	/*.fnb>li{margin-right:49px}*/
	.membership-hd .alert-msg~*{font-size:18px} /*¹ÚÀºÇý ¼öÁ¤*/
}

@media screen and (-webkit-min-device-pixel-ratio:0){
	input[type=checkbox], input[type=radio]{border:0;border-radius:0}
	.btn-like.active:hover .icon-like{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:rubberBand 1s;animation:rubberBand 1s}
	.btn-alarm.active:hover .icon-alarm-wh{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:tada 1s;animation:tada 1s}
	.set-alarm .btn-alarm.active:hover:after{content:"";display:block;position:relative;z-index:10;top:-18px;left:-25px;border-radius:50%;background:#c81f66;-webkit-animation:click-wave .4s;animation:click-wave .4s}
}

/* ¾ÆÀÌÆù ±¸ºÐ webkit-min-device-pixel-ratio 4(ÃÖ½Å¾Èµå·ÎÀÌµå) 3(¾ÆÀÌÆù+) 2(¾ÆÀÌÆù) 1.5(¾Èµå·ÎÀÌµå) 2017.12.11 UTH */
@media screen and (-webkit-min-device-pixel-ratio:2){
	.list-discount5{padding-top:1px;}
	.meta-price5{padding-top:4px;padding-bottom:4px;}
}
@media screen and (-webkit-min-device-pixel-ratio:3){
	.list-discount5{padding-top:1px;}
	.meta-price5{padding-top:1px;}
	.vip-price-main{padding-top: 5px;}
}
/*¾ÆÀÌÆù X*/
@media screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3){
	.list-discount5{padding-top:1px;}
}

body {
	margin: 0 auto;
	overscroll-behavior:contain;
	width: 100%;
}

.b-iframe {height: 100%;}
@supports (-webkit-touch-callout: none) {
	.b-iframe {height: -webkit-fill-available;}
}

/* header */
#header {
	width: 100%;
	height: 67px;
	padding: 0 17px;
	background-color: rgb(255,255,255);
	box-sizing: border-box;
}
#header:after {
	content: '';
	display: block;
	clear: both;
}
#header .logo {
	width: 100px;
	float: left;
}
#header .logo a {
	height: 67px;
	display: block;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center 5px;
	background-image: url(https://img.petitelin.com/amoretto/mainLogo/petit_logo_m.gif);
	background-size: 100%;
}

#header .brand_logo {
	width: 100px;
	float: left;
}
#header .brand_logo a {
	height: 67px;
	display: block;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center 12px;
	background-image: url(https://img.petitelin.com/amoretto/mainLogo/brand_logo.gif);
	background-size: 100%;
}

#header .search__btn {
	width: 32px;
	height: 39px;
	float: right;
	margin: 15px 10px 0 0;
	position: relative;
	top: 0;
	left: -6px;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(/assets/images/search_icon.png);
	background-size: 29px;
}


#header .cart__btn {
	width: 32px;
	height: 39px;
	float: right;
	margin: 14px 0 0;
	position: relative;
	top: 0;
	left: 0;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(/assets/images/ico_cart_bk_63x56.png);
	background-size: 29px;
}
#header .cart__btn:before {
	width: 21px;
	height: 21px;
	content: attr(data-num);
	display: block;
	position: absolute;
	top: 4px;
	right: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: rgb(255,255,255);
	text-align: center;
	background-color: rgba(221,36,113,.6);
	border-radius: 50%;
}
#header .search-box {
	width: calc(100% - 167px);
	height: 39px;
	float: left;
	margin: 14px 17px 0;
	padding: 0 15px;
	background-color: rgb(241,241,241);
	border-radius: 39px;
	box-sizing: border-box;
}
#header .search-box .search__inp {
	width: calc(100% - 22px);
	height: 39px;
	float: left;
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: 18px;
	color: rgb(70,70,70);
	background: none;
	border: 0;
}
#header .search-box .search__btn {
	width: 18px;
	height: 39px;
	float: right;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(/assets/images/ico_search_gr_38x38.png);
	background-size: 100%;
}

/* navi menu */
.navi-menu, .paging {
	width: 100%;
	background-color:white;
	height: 53px;
	margin: 7px 0 0;
	position: relative;
	top: 0;
	left: 0;
}
.navi-menu:before {
	width: 100%;
	height: 1px;
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgb(233,233,233);
}
.scroll, .pagingScroll {
	overflow: hidden;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-transform: translate3d(0,0,0);
}
.pagingScroll li { width: auto }
.scroll::-webkit-scrollbar, .pagingScroll::-webkit-scrollbar {display: none;}
.navi-menu ul, .paging ul {
	font-size: 0;
	white-space: nowrap;
}
.navi-menu ul li {
	display: inline-block;
	vertical-align: top;
	width: auto;
	padding: 0 8px;
}
.navi-menu ul li:first-child { padding-left: 16px; }
.navi-menu ul li:last-child { padding-right: 16px; }
.navi-menu ul li:last-child, .paging ul li:last-child {margin-right: 17px;}
.paging ul li:first-child {margin-left: 17px;}
.navi-menu ul li a {
	display: block;
	position: relative;
	top: 2px;
	left: 0;
	font-weight: 500;
	font-size: 17px;
	color: rgb(34,34,34);
	text-align: center;
	line-height: 53px;
}
.navi-menu ul li a:before {
	width: 100%;
	content: attr(data-tag);
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	font-weight: 400;
	font-size: 12px;
	color: rgb(221,36,113);
	text-align: center;
	line-height: 0.5;
}
.navi-menu ul li.on a:after {
	width: 100%;
	height: 3px;
	content: '';
	display: block;
	position: absolute;
	bottom: 3px;
	left: 0;
	background-color: rgb(221,36,113);
}
/*ÆäÀÌÂ¡ Ãß°¡ CSS*/
.paging {
	margin: 25px 0 15px ;
}
.paging ul {
	text-align: center;
	justify-content: center;
}
.paging ul li {
	display: inline-block;
	margin: 0 0 0 6px;
}
.paging ul li span{
	display:block;
	width:40px;
	border:solid 1px #c2c2c2;
	font-size:18px;
	text-align:center;
	color:#222;
	line-height: 40px;
}
.paging ul li.on span{
	background-color:#c81f66;color:#fff
}


/* top menu */
.top__menu {
	z-index:11;
	background-color:white;
	position:sticky;
	top:0;
}


/* menu bar */
.menu__bar {
	width: 100%;
	height: 65px;
	padding: 12px 17px 0px;
	position: fixed;
	bottom: 0;
	z-index: 10;
	background-color: rgb(255,255,255);
	border-top: 1px solid rgb(219,219,219);
	box-sizing: border-box;
	will-change:bottom;
	max-width: 600px;
	letter-spacing: 0;
}
.menu__bar:after {
	content: '';
	display: block;
	clear: both;
}
.menu__bar a {
	width: 20%;
	float: left;
	padding: 28px 0 0;
	font-weight: 400;
	font-size: 11px;
	color: rgb(34,34,34);
	text-align: center;
	background-repeat: no-repeat;
	background-position: center 0;
}
.menu__bar .category__btn {
	background-position: center 4px;
	background-image: url(/assets/images/ico_category_bk_65x47.png);
	background-size: 25px;
}
.menu__bar .category__btn.on {
	color: rgb(221,36,113);
	background-image: url(/assets/images/ico_category_pk_65x47.png);
}
.menu__bar .delivery__btn {
	position:relative;
	background-position: center 3px;
	background-image: url(/assets/images/ico_delivery_bk_75x58.png);
	background-size: 28px;
}
.menu__bar .delivery__btn.on {
	color: rgb(221,36,113);
	background-image: url(/assets/images/ico_delivery_pk_75x58.png);
}
.menu__bar .delivery__btn:before {
	width: 21px;
	height: 21px;
	content: attr(data-num);
	display: block;
	position: absolute;
	top: -5px;
	right: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: rgb(255,255,255);
	text-align: center;
	background-color: rgba(221,36,113,.6);
	border-radius: 50%;
}

.menu__bar .home__btn {
	background-image: url(/assets/images/ico_home_bk_69x69.png);
	background-size: 26px;
}
.menu__bar .home__btn.on {
	color: rgb(221,36,113);
	background-image: url(/assets/images/ico_home_pk_69x69.png);
}
.menu__bar .mypage__btn {
	background-image: url(/assets/images/ico_mypage_bk_67x69.png);
	background-size: 25px;
}
.menu__bar .mypage__btn.on {
	color: rgb(221,36,113);
	background-image: url(/assets/images/ico_mypage_pk_67x69.png);
}
.menu__bar .history__btn {
	position:relative;
	background-image: url(/assets/images/ico_history_bk_69x69.png);
	background-size: 26px;
}
.menu__bar .history__btn.on {
	color: rgb(221,36,113);
	background-image: url(/assets/images/ico_history_pk_69x69.png);
}
.menu__bar .history__btn:before {
	width: 21px;
	height: 21px;
	content: attr(data-num);
	display: block;
	position: absolute;
	top: -5px;
	right: 25px;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: rgb(255,255,255);
	text-align: center;
	background-color: rgba(221,36,113,.6);
	border-radius: 50%;
}

/* top button */
.top__btn {
	width: 33px;
	height: 33px;
	display: none;
	position: fixed;
	bottom: 90px;
	font-size: 0;
	background-color: rgb(255,255,255);
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(/assets/images/arr_up_bk_50x60.png);
	background-size: 13px;
	border: 0px solid rgb(226,226,226);
	border-radius: 50%;
	box-sizing: border-box;
}


#circle {
	position:relative;
	width:720px;
	height:720px;
	overflow: hidden;
}
#circle div img {
	width:inherit;
	height:inherit;
}
.circleRotate {width:inherit;height:inherit;position:absolute;top:0;left:0;}
.circleRotate_anime{
	animation: circleRotate 2s 0s linear forwards;
	-webkit-animation: circleRotate 2s 0s linear forwards;}
#circleMask2{width:inherit;height:inherit;position:absolute;top:0;left:0}
#circleMask{width:inherit;height:inherit;position:absolute;top:0;left:0;}
.circleMask_anime{
	animation: circleMask 2s 0s linear forwards;
	-webkit-animation: circleMask 2s 0s linear forwards;
}
#circleBack {width:inherit;height:inherit;position:absolute;top:0;left:0;opacity:0;}
.circleBack_anime{
	animation: circleBack 2s 0s linear forwards;
	-webkit-animation: circleBack 2s 0s linear forwards;
}



/*µðÀÚÀÎÆÀ Ãß°¡ ¼öÁ¤*/
#header .search-box .search__inp {
	font-size: 15px;
}