/* header */
.header-web-back { background:#ffffff; border-bottom:1px solid #e5e5e5; }
.header-web { 
	/*border-bottom:1px solid #dbdbdb; background:#ffffff; padding:10px 30px; border-bottom:1px solid #e5e5e5;*/
	width:100%; max-width: 1440px; padding:10px 0; gap:20px;  margin: 0 auto; background:#ffffff;  
	display:grid; grid-template-columns: 180px 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 #F68100;*/ color:#F68100; color:#FFFFFF; }
.header-web .menu .menu_highlight { /*border-bottom:2px solid #F68100;*/ color:#F68100; color:#FFFFFF; }
.header-web .menu .button a { 
	display:block; border-radius:4px; text-align:center; font-size:16px; color:#ffffff; 
	padding:8px; background:#F68100; border:1px solid #F68100; 
}
.header-web .search { width:100%; place-self:center center; }
.header-web .search input { 
	width:100%; font-size:15px; padding:8px 10px; border:2px solid #F68100; border-radius:25px; 
	background:url(/resources/images/common/search_icon_s.png) no-repeat right 10px center #ffffff;  background-size:15px 15px; 
	
}
.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:#F68100; 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:500; 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 #F68100;
}
.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; }
.header-web .shortcut .hideMenu li:first-child { background:#F68100; 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; }

.header-mobile { display:none; position:fixed; top:0; left:0; right:0; z-index:999; /*background:#ffffff;*/ background: #F68100; }
.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 #F68100;*/ 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:#F68100; 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 #F68100; color:#F68100;*/ color:#FFFFFF; }
.header-mobile .bottom-menu .menu_highlight { /*border-bottom: 2px solid #F68100; color:#F68100;*/ color:#FFFFFF; }
.header-mobile .bottom-menu .button a { 
	display:block; border-radius:4px; text-align:center; font-size:15px; color:#ffffff; 
	padding:5px; background:#F68100;  
}
/* header */

/* side menu */
.side_menu{display:none; width:100%; position: fixed; top: 0; bottom: 0; right:0; background: #eeeeee; z-index: 9999;}
.side_menu .side-menu-top { background-color: #F68100; 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 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{position:absolute; 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:#F68100; 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 #F68100;}
.sub-menu-mobile{ width:100%; display:none; line-height:1.5; background:#ffffff; }
.sub-menu-mobile.buyer ul { display:grid; grid-template-columns: repeat(3, 1fr); }
.sub-menu-mobile.agent ul { display:grid; grid-template-columns: repeat(4, 1fr); }
.sub-menu-mobile ul li { width:100%; height:100%; border:0px; border-top:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; }
.sub-menu-mobile ul li:first-child { border-left: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 */

/* media */
@media(max-width:1024px){
	
	.header-mobile .top-menu {  grid-template-columns: 180px minmax(0px, auto) 140px; }
	
	/* header */
	.header-web { display:none; }
	.header-mobile { display:block;   background: #ffffff; }
	/* header */
	
	/* sub menu */
	.sub-menu-web{display:none;}
	.sub-menu-mobile{ display:block; }
	.sub-menu-mobile ul li a{font-size:12px;}
	/* sub menu */
}