body.menu-on{height: 100vh;overflow: hidden}
:root{--width: 100%}
.container{padding: 0 5%;box-sizing: border-box;}
.pagination span{width: auto;}
.pagination .pager li{width: 30px;height: 30px;}

#header{transition: 0.5s;z-index: 99999999;}
#header .menu-btn{display:flex;align-items:center;justify-content:center;width:60px;height:59px;position:absolute;right:0}
#header .menu-btn span,#header .menu-btn::after,#header .menu-btn::before{content:'';position:absolute;width:30px;height:2px;background:#666;}
#header .menu-btn::before{top:20px}
#header .menu-btn::after{bottom:20px}
#header .menu-wrap .menu{background:#fff;position:fixed;right:-70%;top:0;padding:0;width:70%;margin:0;}
#header .menu-wrap .menu ul li{width:100%!important;padding:0 0 0 20px;box-sizing:border-box;line-height: 50px;margin: 0 !important;}
#header .menu-wrap .menu ul li img{display: none !important;}
#header .menu-wrap .menu ul li a{padding: 0 !important;height: 50px !important;line-height: 50px !important;width: 100%;margin-bottom:0 !important;}
#header .menu-wrap .menu ul li .dropdown{display: block;right: 0;top: 0;margin: 0;width: 50px;}
#header .menu-wrap .menu ul li .dropdown::before{content:"";width:7px;height:7px;position:absolute;right:40%;top:50%;box-sizing:border-box;border-width:1px 0 0 1px;border-style:solid;border-color:initial;-webkit-transform:rotate(135deg) translate(0,-50%);transform:rotate(135deg) translate(0,-50%);-webkit-transform-origin:top;transform-origin:top;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
#header .menu-wrap .menu ul li.on > a .dropdown::before{-webkit-transform:rotate(225deg) translate(0,-50%);transform:rotate(225deg) translate(0,-50%);}
#header .menu-wrap .menu .first{height: 100vh;overflow-y: scroll}
#header .menu-wrap .menu .first>li{border-bottom:1px solid #eee;height:initial;padding: 0 10px 0 20px}
#header .menu-wrap .menu .first>li a{color:#333}
#header .menu-wrap .menu .first>li>a::after{display:none}
#header .menu-wrap .menu .first>li a:hover::after{display:none}
#header .menu-wrap .menu .second{width:100% !important;box-sizing:border-box;position:initial !important;;margin:0 !important;;padding:0 !important;}
#header .menu-wrap .menu .sub-box{position: initial;background: #fff;box-sizing: border-box;}
#header .menu-wrap .menu .sub-box ul li a{color: #333;text-align: left;padding-left: 2em !important;}
#header .menu-wrap .menu .second > li:hover a{background: #ededff;}
#header.menu-on{-webkit-transform: translateX(-70%);-ms-transform: translateX(-70%);transform: translateX(-70%);}
#header.menu-on .menu-btn:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:33px;left:20px}
#header.menu-on .menu-btn:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:33px;left:20px}
#header.menu-on .menu-btn span{display: none}
#header.menu-on .menu-head{box-shadow:-1px 0 5px 0 rgba(0,0,0,.2);}
#header .menu-box .btn{margin-right: 50px;}

#main .top-banner{height: 350px;}

#index.index .banner{height: 350px;}
#index.index .slogan .con{width: 100%;left: 0;padding-left: 50px;box-sizing: border-box;}
#index.index .slogan .con .logo{text-align: left;}
#index.index .slogan > img{height: 400px;transform: scaleX(-1);}
#product.detail .content{padding: 50px 5%;}