/* header */
.header-web { 
	/*border-bottom:1px solid #dbdbdb; background:#ffffff;*/
	width:100%; padding:10px 30px; gap:20px;  margin: 0 auto; background:#f4869d; border-bottom:1px solid #FFFFFF; 
	display:grid; grid-template-columns: 40px 500px minmax(200px, auto) 260px; grid-template-rows:49px;
}
.header-web .logo { place-self:center center; }
.header-web .menu { display:grid; grid-template-columns:repeat(4, auto); gap:10px; }
/* .header-web .menu { display:grid; grid-template-columns:repeat(5, auto); gap:10px; } */
.header-web .menu li { place-self:center center; }
.header-web .menu li > a { display:block; font-size:16px; /*color:#666666;*/ color:#FFFFFF; font-weight:400; }
.header-web .menu li > a:hover { /*border-bottom:2px solid #f4869d;*/ color:#f4869d; color:#FFFFFF; }
.header-web .menu .menu_highlight { /*border-bottom:2px solid #f4869d;*/ color:#f4869d; color:#FFFFFF; }
.header-web .menu .button a { 
	display:block; border-radius:4px; text-align:center; font-size:16px; color:#ffffff; 
	padding:8px; background:#f4869d; border:1px solid #f4869d; 
}
.header-web .search { width:100%; place-self:center center; position: relative; }
.header-web .search input { 
	width:100%; font-size:15px; padding:8px 10px; border:2px solid #f4869d; border-radius:25px; 
	background:url(/resources/images/common/search_icon_s.png) no-repeat right 10px center #ffffff;  background-size:15px 15px; 
	
}
/* Auto Search */
body:has(.header-web) .ui-autocomplete { max-height: 600px !important; overflow-y: auto; overflow-x: hidden; padding:10px; }
body:has(.header-web) .ui-autocomplete .ui-menu-item .ui-state-active { background:#f4869d; border-color:#f4869d; }
body:has(.header-web) .ui-autocomplete .ui-menu-item .ui-state-active:hover { background:#f4869d; border-color:#f4869d; }
.ui-autocomplete .auto-search-box { display:grid; grid-template-columns:100px 1fr; gap:10px; align-items:center; padding:10px; }
.ui-autocomplete .auto-search-img { }
.ui-autocomplete .auto-search-data { line-height: 1.5; }
.ui-autocomplete .auto-search-more { padding:10px; text-align: center; font-weight: bold; }
/* Auto Search */
.header-web .shortcut { width:100%; place-self:center center; }
.header-web .shortcut .login-button { display:grid; grid-template-columns: 1fr 1fr; gap:5px; } 
.header-web .shortcut .login-button a {
	/*
	width:100%; font-size:15px; color:#666666; text-align:center; padding:8px 0px; border:1px solid #e8e8e8; border-radius:4px;
    background-color:#f5f5f5; background-size:17px 18px; background-position:7px center; display:inline-block;
    */
    width:100%; font-size:15px; text-align:center; padding:10px 0px; border: 2px solid #fff; 
    transition: all 0.2s; color:#FFFFFF; border-radius:8px; display:inline-block;
}
.header-web .shortcut .login-button span { color:#fff; font-size:16px; font-weight: bold; }
.header-web .shortcut .login-button a:hover { background-color:#fff; transition: all 0.2s; }
.header-web .shortcut .login-button a:hover span { color:#f4869d; transition: all 0.2s; }
.header-web .shortcut > ul { width:100%; height:100%; display:grid; grid-template-columns: repeat(3, 1fr) 120px; gap:10px; }
.header-web .shortcut > ul li { place-self:center center; }
.header-web .shortcut > ul li a .icon { width:30px; height:30px; background-size: contain !important; display: inline-block; }
.header-web .shortcut > ul li a .icon-message { background:url(/resources/images/icon/header_message.png) no-repeat center bottom; }
.header-web .shortcut > ul li a .icon-cart { background:url(/resources/images/icon/header_cart.png) no-repeat center bottom; }
.header-web .shortcut > ul li a .icon-order { background:url(/resources/images/icon/header_order.png) no-repeat center bottom; }
.header-web .shortcut > ul li a .icon-product { background:url(/resources/images/icon/header_order.png) no-repeat center bottom; }
.header-web .shortcut > ul li a .icon-packing { background:url(/resources/images/icon/header_order.png) no-repeat center bottom; }
.header-web .shortcut > ul li:last-child { padding-left:10px; }
.header-web .shortcut > ul li a .count {  }
.header-web .shortcut .user_info { place-self:center center; position:relative; }
.header-web .shortcut .user_info a { color:#666666; display:grid; grid-template-columns:40px auto; gap:10px; }
.header-web .shortcut .user_info img { align-self:center; height:40px; border-radius:52px; border:1px solid #dadada; }
.header-web .shortcut .user_info span { align-self:center; font-size:15px; font-weight:300; display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.header-web .shortcut .Menu_wrapper { 
	position:absolute; top:55px; right:40px; z-index:999; border-left:7px solid transparent; 
	border-right:7px solid transparent; border-bottom: 15px solid #f4869d;
}
.header-web .shortcut .hideMenu { 
	width:250px; display:block; position:absolute; background:#fff; z-index:998; 
	top:15px; right:-50px; box-shadow:0 2px 0 1px rgba(0,0,0,0.1); 
}
.header-web .shortcut .hideMenu li { padding:0 10px; text-align:left; height:50px; line-height:50px; color:#333; border-bottom:1px solid #dbdbdb; font-weight:400; width:100%; }
.header-web .shortcut .hideMenu li:first-child { background:#f4869d; color:#ffffff; }
.header-web .shortcut .hideMenu li:last-child { background:#ebebeb; }
.header-web .shortcut .hideMenu li a { display:block; color:#333; padding:0; width:initial; background: url(/resources/images/common/hiddenGo.png) no-repeat right center; }
.header-web .shortcut .hideMenu li:last-child a { background: url(/resources/images/common/logout_common.png) no-repeat right center; }

/* Child Menu */
.header-web .child-menu { place-self:center center; position:relative; width: 100%; }
.header-web .child-menu .child-menu-arrow { position:absolute; top:27px; left:30px; z-index:999; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom: 15px solid #f4869d; }
.header-web .child-menu .child-menu-items { width:480px; position:absolute; background:#fff; z-index:998; top:15px; left:-240px; box-shadow:0 2px 0 1px rgba(0,0,0,0.1); display: grid; grid-template-columns: repeat(2, 1fr); }
.header-web .child-menu .child-menu-item li { padding:0 10px; text-align:left; height:50px; line-height:50px; border-bottom:1px solid #dbdbdb; font-weight:400; width:100%; }
.header-web .child-menu .child-menu-item li:first-child { background:#f4869d; color:#FFFFFF; }
.header-web .child-menu .child-menu-item li a { display:block; padding:0; width:initial; color:#333333; background: url(/resources/images/common/hiddenGo.png) no-repeat right center; }

.header-mobile .child-menu { place-self:center center; position:relative; width: 100%; }
.header-mobile .child-menu .child-menu-arrow { position:absolute; left:83%; z-index:999; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom: 15px solid #f4869d; }
.header-mobile .child-menu .child-menu-items { width:100%; background:#fff; z-index:998; box-shadow:0 2px 0 1px rgba(0,0,0,0.1); display: grid; grid-template-columns: repeat(2, 1fr); padding-top:15px; }
.header-mobile .child-menu .child-menu-item li { padding:0 10px; text-align:left; height:50px; line-height:50px; border-bottom:1px solid #dbdbdb; font-weight:400; font-size:15px; }
.header-mobile .child-menu .child-menu-item li:first-child { background:#f4869d; color:#FFFFFF; }
.header-mobile .child-menu .child-menu-item li a { display:block; padding:0; width:initial; color:#333333; background: url(/resources/images/common/hiddenGo.png) no-repeat right center; }
/* Child Menu */

.auto-search-more{background: #EEEEEE;}
.discount-rate {
    color: red;
}
.tag-amount {
    text-decoration: line-through;
    color: #AAA;
}

/* Cart Quick Menu */
.btn-primary{ 	margin-top: 0px !important; }
.cart-quick-menu { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); width: 500px; height: 100%; position: fixed; right: 0; z-index: 20; background: #fff; top: 0; }
.cart-quick-menu .content { padding: 20px; height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; }
.cart-quick-menu .title { padding: 10px 0; display: flex; justify-content: space-between; }
.cart-quick-menu .all-remove { text-align: center; cursor: pointer; padding: 10px 0; }
.cart-quick-menu .title-text { font-size: 20px; }
.cart-quick-menu .item-image { width: 100%; height: 100px; vertical-align: middle; display: block; text-align: center; position: relative; }
.cart-quick-menu .cart-item { padding : 15px 0; display: grid; gap:10px; grid-template-columns: 30% 1fr; border-bottom: 1px solid #ddd; }
.cart-quick-menu .cart-quantity{ width: 100%; height: 30px; text-align: center; }
.cart-quick-menu .cart-info{ display: flex; flex-direction: column; justify-content: space-between; }
.cart-quick-menu .cart-info .brand-name{ word-break: break-all; font-weight: 400; }
.cart-quick-menu .cart-items{ border-top: 2px solid #EEEEEE; border-bottom: 2px solid #EEEEEE; overflow-y: auto; overflow-x: hidden; }
.cart-quick-menu .tash-image{ background-image: url('resources/images/common/ico/trashcase.png'); background-size: cover; }
.cart-quick-menu .check-out-button{ width: 100%; padding: 10px 0; color: #fff; background: #f4869d; display: block; border-radius: 4px; text-align: center; }
.cart-quick-menu .cart-button{ width: 100%; padding: 10px 0; color: white; background: black; display: block; border-radius: 4px; border: 1px solid; text-align: center; }
.cart-quick-menu .cart-footer{ padding-top: 20px; display: grid; 	grid-template-rows: auto auto auto; gap: 10px; }
.cart-quick-menu .subtotal-text{ font-size: 20px; font-weight: bold; }
.cart-quick-menu .cart-price { font-weight: bold; 	}
.cart-quick-menu .cart-quick-menu img { cursor: pointer; }
.cart-quick-menu .ui-icon-trash { background-image: url(/resources/images/common/ui-icons_444444_256x240.png) !important; display: inline-block; height: 15px; }
.cart-quick-menu .ui-icon-trash{ -ms-transform: scale(1.5); /* IE 9 */ 	-webkit-transform: scale(1.5) !important; /* Chrome, Safari, Opera */ transform: scale(2); cursor: pointer; justify-self: end; }
.cart-quick-menu .input-group.bootstrap-touchspin.bootstrap-touchspin-injected{ width: 100px; }
.cart-quick-menu .cart-sub-info{ display: grid; align-items: center; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top:10px; }
.cart-quick-menu .modal-confirm { background-color: #ffd1c4; position: absolute; width: 100%; z-index: 1000; line-height: 60px; }
.cart-quick-menu .modal-confirm .container{ width: 100% !important; }
.cart-quick-menu .modal-confirm .msgarea { text-align: center; 	position: relative; font-size: 16px; color: #565a5c; }
.cart-quick-menu .modal-confirm .msgarea em { padding-right: 20px; display: inline-block; vertical-align: top; }
.cart-quick-menu .no-result-cart{ font-weight: bold; }
.input-group.bootstrap-touchspin.bootstrap-touchspin-injected button{ background-color: white; border: 1px solid #ccc !important; color: black; font-weight: bold; }
/* scroll design */
/**::-webkit-scrollbar { background-color: #fff; width: 16px; }*/
/* background of the scrollbar except button or resizer */
*::-webkit-scrollbar-track { background-color: #fff; }
/* scrollbar itself */
*::-webkit-scrollbar-thumb { background-color: #babac0; border-radius: 16px; border: 4px solid #fff; }
/* set button(top and bottom of the scrollbar) */
*::-webkit-scrollbar-button { display:none; }
/* scroll design */	
@media(max-width:1024px){
	.cart-quick-menu { width:100%; }
	.cart-quick-menu .title-text { font-size:15px; }
	.cart-quick-menu .cart-close-button { width: 15px; height: 15px; }
	.cart-quick-menu .check-out-button { font-size:15px; }
	.cart-quick-menu .cart-item { padding:10px 0; }
	.cart-quick-menu .subtotal-text { font-size:15px; }
	.cart-quick-menu .cart-button { font-size:15px; }
	.cart-quick-menu .cart-info { font-size:15px; }
	.cart-quick-menu .input-group.bootstrap-touchspin.bootstrap-touchspin-injected { width:80px; }
}
/* Cart Quick Menu */

.header-mobile { display:none; position:fixed; top:0; left:0; right:0; z-index:999; /*background:#ffffff;*/ background: #f4869d; }
.header-mobile .top-menu { display:grid; grid-template-columns: 30px minmax(130px, auto) 140px; padding:10px; gap:10px; border-bottom:1px solid #dbdbdb; }
.header-mobile .top-menu .logo img { height:38px; }
.header-mobile .top-menu .search input { 
	width:100%; font-size:15px; padding:6px 10px; /*border:2px solid #f4869d;*/ border:2px solid #FFFFFF; border-radius:25px; 
	background:url(/resources/images/common/search_icon_s.png) no-repeat right 10px center #ffffff; background-size:15px 15px;
}
.header-mobile .shortcut .login-button { display:grid; grid-template-columns: 1fr 1fr; gap:5px; }
.header-mobile .shortcut .login-button a {
	/*
	width:100%; font-size:15px; color:#666666; text-align:center; padding:8px 0px; border:1px solid #e8e8e8; border-radius:4px;
    background-color:#f5f5f5; background-size:17px 18px; background-position:7px center; display:inline-block;
    */
    width:100%; font-size:15px; text-align:center; padding:10px 0px; border: 2px solid #fff; 
    transition: all 0.2s; color:#FFFFFF; border-radius:8px; display:inline-block;
}
.header-mobile .shortcut .login-button span { color:#fff; font-size:15px; font-weight: bold; }
.header-mobile .shortcut .login-button a:hover { background-color:#fff; transition: all 0.2s; }
.header-mobile .shortcut .login-button a:hover span { color:#f4869d; transition: all 0.2s; }
.header-mobile .top-menu .shortcut > ul { display:grid; grid-template-columns: repeat(4, 1fr); gap:5px; width:100%; height:100%; }
.header-mobile .top-menu .shortcut > ul li { place-self:center center; }
.header-mobile .top-menu .shortcut > ul li a .icon { width:25px; height:25px; background-size: contain !important; display: inline-block; }
.header-mobile .top-menu .shortcut > ul li a .icon-message { background:url(/resources/images/icon/header_message.png) no-repeat center bottom; }
.header-mobile .top-menu .shortcut > ul li a .icon-cart { background:url(/resources/images/icon/header_cart.png) no-repeat center bottom; }
.header-mobile .top-menu .shortcut > ul li a .icon-order { background:url(/resources/images/icon/header_order.png) no-repeat center bottom; }
.header-mobile .top-menu .shortcut > ul li a .icon-user { background:url(/resources/images/icon/header_user.png) no-repeat center bottom; }
.header-mobile .top-menu .shortcut > ul li a .icon-product { background:url(/resources/images/icon/header_order.png) no-repeat center bottom; }
.header-mobile .top-menu .shortcut > ul li a .icon-packing { background:url(/resources/images/icon/header_order.png) no-repeat center bottom; } 
.header-mobile .top-menu .shortcut > ul li a .count {  }
.header-mobile .bottom-menu > ul { display:grid; grid-template-columns: repeat(4, 1fr); padding:0.5px 10px; gap:10px; border-bottom:1px solid #d5d5d5; }
/* .header-mobile .bottom-menu > ul { display:grid; grid-template-columns: repeat(5, 1fr); padding:0.5px 10px; gap:10px; border-bottom:1px solid #d5d5d5; } */
.header-mobile .bottom-menu > ul > li { text-align:center; padding: 10px 0; }
.header-mobile .bottom-menu > ul > li a { font-weight:400; font-size:15px; padding:7px; /*color:#555555;*/ color:#FFFFFF; display:inline-block; }
.header-mobile .bottom-menu > ul > li a:active { /*border-bottom:2px solid #f4869d; color:#f4869d;*/ color:#FFFFFF; }
.header-mobile .bottom-menu .menu_highlight { /*border-bottom: 2px solid #f4869d; color:#f4869d;*/ color:#FFFFFF; }
.header-mobile .bottom-menu .button a { 
	display:block; border-radius:4px; text-align:center; font-size:15px; color:#ffffff; 
	padding:5px; background:#f4869d;  
}
/* header */

/* side menu */
.side_menu{display:none; width:100%; position: fixed; top: 0; bottom: 0; right:0; background: #eeeeee; z-index: 9999; grid-template-rows: auto 1fr auto;}
.side_menu .side-menu-top { background-color: #f4869d; height: 165px; padding: 15px;}
.side-menu-top .photo-wrapper{width: 75px; height: 75px; border-radius: 50%; overflow: hidden; border: 2px solid #ffffff; margin: 0 auto 15px auto;}
.side-menu-top .side-user-info p{color:#ffffff; font-size:16px; font-weight:500; text-align:center;}
.side-menu-top .side-user-info p span{margin-left:15px; background:#ffffff; border-radius:20px; padding:0 10px; display:inline-block; color:#fe5a5f; font-size:14px; position:relative; top:-1px;}
.side-menu-top>a>img{width:15px; height:auto;}
.side-menu-middle { overflow-y: scroll; }
.side-menu-middle ul{padding:25px;}
.side-menu-middle ul li{margin-bottom:10px;}
.side-menu-middle ul li a { 
	display:inline-block; padding:15px; width:100%; font-size:15px; color:#777777;
	background: url(/resources/images/common/side-menu-go.png) #ffffff no-repeat 95% center; 
	box-shadow:3px 2px 2px rgba(0,0,0,0.1); border-radius:6px; font-weight:400;
}
.side-menu-bottom{bottom:0; left:0; right:0; font-weight:400;}
.side-menu-bottom ul li a{background:#ffffff; padding:15px 0; text-align:center; display:block; font-size:15px; color:#999999; border-bottom:1px solid #ebebeb;}
.side-menu-bottom ul li a span.icon5{background:url(/resources/images/common/mo-change1.png) no-repeat center center; width:20px; height:20px; display:inline-block; margin-right:10px; background-size:contain; position: relative; top: 3px;}
.side-menu-bottom ul li a span.icon6{background:url(/resources/images/common/logout_common.png) no-repeat center center; width:17px; height:15px; display:inline-block; margin-right:10px; background-size:contain;}
.side-menu-bottom ul li a span.icon7{background:url(/resources/images/common/login_common.png) no-repeat center center; width:17px; height:15px; display:inline-block; margin-right:10px; background-size:contain;}
/* side menu */

/* sub menu */
.sub-menu { margin-bottom:0px; }
.sub-menu-web { background:#ffffff; border-radius:6px; padding:0; }
.sub-menu-web .title { padding:15px 20px; background:#f4869d; color:#ffffff; font-size:20px; border-radius:6px 6px 0 0; }
.sub-menu-web .content { padding:15px 0; }
.sub-menu-web .content ul li a { display:block; padding:15px 20px; font-size:16px; color:#333333; }
.sub-menu-web .content ul li a.active{background-color:#fafafa; border-left:3px solid #f4869d;}
.sub-menu-mobile{ width:100%; display:none; line-height:1.5; background:#ffffff; }
.sub-menu-mobile ul { display:grid; grid-template-columns: repeat(3, 1fr); }
.sub-menu-mobile ul li { width:100%; height:100%; border:0px; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; }
.sub-menu-mobile ul li:nth-child(3n) { border-right:0px; }
.sub-menu-mobile ul li:nth-last-child(-n+3) { /*border-bottom:0px;*/ }
.sub-menu-mobile ul li a { width:100%; height:100%; display:block; padding:10px 0; text-align:center; font-size:16px; color:#333333; font-weight:400; }
.sub-menu-mobile ul li a.active{background-color:#999999; color:#ffffff;}
.sub-menu-mobile ul li span {display:block; margin:0 auto 5px auto; width:40px; height:37px; background-size:36px 36px;}
.sub-menu-mobile ul li span.sub-product {background:url(/resources/images/icon/sub_product.png) no-repeat center center;}
.sub-menu-mobile ul li span.sub-message {background:url(/resources/images/icon/sub_message.png) no-repeat center center;}
.sub-menu-mobile ul li span.sub-cart {background:url(/resources/images/icon/sub_cart.png) no-repeat center center;}
.sub-menu-mobile ul li span.sub-order {background:url(/resources/images/icon/sub_order.png) no-repeat center center;}
.sub-menu-mobile ul li span.sub-profile {background:url(/resources/images/icon/sub_profile.png) no-repeat center center;}
.sub-menu-mobile ul li span.sub-password {background:url(/resources/images/icon/sub_password.png) no-repeat center center;}
.sub-menu-mobile ul li span.sub-address {background:url(/resources/images/icon/sub_address.png) no-repeat center center;}
.sub-menu-mobile ul li span.sub-passwordless {background:url(/resources/images/icon/sub_passwordless.png) no-repeat center center;}
.sub-menu-mobile ul li span.sub-credit {background:url(/resources/images/icon/sub_credit.png) no-repeat center center;}
/* sub menu */

/* media */
@media(max-width:1024px){
	/* header */
	.header-web { display:none; }
	.header-mobile { display:block; }
	/* header */
	
	/* sub menu */
	.sub-menu-web{display:none;}
	.sub-menu-mobile{ display:block; }
	.sub-menu-mobile ul li a{font-size:12px;}
	/* sub menu */
}