body{padding-top: 0}
body.menu-on{height: 100vh;overflow: hidden}
.btn{width: 110px;height: 45px;line-height: 45px;}
.btn i{right: 20px;}
.container{width: 100%}

#header{position:relative;transition: 0.5s;z-index: 99999999;height: 70px;}
#header .logo{height: 100%;display: flex;align-items: center;padding-left: 20px}
#header .logo img{height: 50%;width: inherit;}
#header .r{display:none}
#header .menu-btn{display:flex;align-items:center;justify-content:center;width:70px;height:70px;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:23px}
#header .menu-btn::after{bottom:23px}
#header .menu-head{background:#fff;position:fixed;right:-70%;top:0;padding:0;width:70%;margin:0;}
#header .menu-head ul li{width:100%!important;padding:0 0 0 20px;box-sizing:border-box;line-height: 50px;margin: 0 !important;}
#header .menu-head ul li img{display: none !important;}
#header .menu-head ul li a{padding: 0 !important;height: 50px !important;line-height: 50px !important;width: 100%;margin-bottom:0 !important;}
#header .menu-head ul li .btn-dropdown{width: 50px;height: 50px;position: absolute;right: 0;top: 0;}
#header .menu-head ul li .btn-dropdown::before{content:"";width:7px;height:7px;position:absolute;right:50%;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-head ul li .btn-dropdown.active::before{-webkit-transform:rotate(225deg) translate(0,-50%);transform:rotate(225deg) translate(0,-50%);}
#header .menu-head .first{height: 100vh;overflow-y: scroll}
#header .menu-head .first ul{display: none}
#header .menu-head .first>li{border-bottom:1px solid #eee;height:initial;padding: 0 10px 0 20px}
#header .menu-head .first>li a{color:#333}
#header .menu-head .first>li>a::after{display:none}
#header .menu-head .first>li a:hover::after{display:none}
#header .menu-head .second{width:100% !important;box-sizing:border-box;position:initial !important;;margin:0 !important;;padding:0 !important;}
#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);}

#footer{padding: 0 20px;box-sizing: border-box}
#footer::before{right: 90%;z-index: -1;}
#footer::after{left: 90%;z-index: -1;}
#footer .con{padding: 50px 0 20px}
#footer .con .l{width: 100%;text-align: center;}
#footer .con .l img{width: 70%}
#footer .con .c{width: 100%;padding: 0 20px}
#footer .con .c .menu-foot ul.first{padding:0}
#footer .con .r{width: 100%;font-size: 1.4rem}
#footer .con .r .tab{margin-top: 10px;}
#footer .con .r .tab .nav span{padding:0 10px;line-height: 27px;}

#index.index .left-way{display: none}
#index.index .banner{height: 500px}
#index.index .banner .container .img{width: 50%;text-align: center;}
#index.index .banner .container .img img{width: 70%}
#index.index .banner .container .txt{width: 50%;}
#index.index .banner .container .txt .slogan{text-align: left !important;padding-left:40px !important;}
#index.index .banner .container .txt .slogan:first-of-type{font-size: 3rem}
#index.index .banner .container .txt .slogan:last-of-type{font-size:1.8rem;padding-top: 50px}
#index.index .title{font-size:3rem}
#index.index .box{border-radius: 0;box-shadow: none;padding:40px 30px !important;box-sizing: border-box;}
#index.index .btn-dot{width: 40px;height: 40px;right: 50px !important;}
#index.index .about{padding-bottom: 20px}
#index.index .about .bg{height: 100%;margin-top:-25vh;}
#index.index .about .box{box-shadow:none;background: none}
#index.index .about .box .r .t{font-size: 3rem}
#index.index .product .title .btn{right: 50px;}

#index.index .product .tab-nav .swiper-slide .name{padding-top:0;font-size: 1.4rem;}
#index.index .product .tab-content .swiper-slide .t{font-size: 2rem}
#index.index .product .tab-content .swiper-slide .desc{font-size: 1.5rem}
#index.index .product .tab-content .swiper-slide .l .btn-dot{right: initial !important;}
#index.index .solution .box{width: 100%}
#index.index .solution .box .item{height: 400px}
#index.index .solution .btn{margin: 20px auto;}
#index.index .news .title{align-items: center;padding: 20px 0 10px;}
#index.index .news .box .swiper-slide .time .date{font-size: 2rem}
#index.index .news .box .swiper-slide .time .year{font-size:1.5rem}
#index.index .news .box .swiper-slide .title{font-size: 1.5rem;padding-bottom: 20px;}

#product.detail .main .content .detail .txt{overflow-x: scroll}
#product.detail .main .content .detail .txt img{width: 100% !important;}