.header-wrap { width: 100%; background: #fff; position: relative; /* box-shadow: 0rem 0.03rem 0.06rem 0.01rem rgba(0, 0, 0, 0.1); */ /* box-shadow: 0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.1); */ } .header-box{ margin: 0 auto; } .header-wrap .top{ display: flex; align-items: center; justify-content: space-between; padding: .2rem 0; } .header-wrap .top .rig{ display: flex; justify-content: flex-end; align-items: center; } .header-wrap .top .rig a{ display: flex; align-items: center; font-size: 0.14rem; color: #666666; margin-right: .28rem; } .header-wrap .top .rig a img{ width: .13rem;height: .13rem; margin-right: .1rem; } .header-wrap .top .left{ display: flex; align-items: flex-end; } .header-wrap .top .left .logo{ width: 1.71rem;height: 0.59rem; margin-right: 1.61rem; } .header-wrap .top .left .logo img{ width: 100%;height: 100%; cursor: pointer; } .header-wrap .top .left .search{ position: relative; } .header-wrap .top .left .search input{ width: 3.03rem; height: 0.4rem; line-height: .4rem; border: 1px solid #999999; border-radius: 0.2rem; padding: 0 .17rem 0; font-size: 0.14rem; color: #999999; } .header-wrap .top .left .search img{ width: 0.18rem;height: 0.18rem; position: absolute; top: .11rem; right: .22rem; cursor: pointer; object-fit: fill; } .header-wrap .nav{ display: flex; width: 100%; height: 0.5rem; line-height: 0.5rem; /*align-items: center;*/ } .header-wrap .nav a{ margin-right: .86rem; font-size: 0.18rem; color: #333333; border-bottom: 0.03rem #fff solid; } .header-wrap .nav a.active{ font-size: 0.18rem; font-weight: bold; color: #02928E; border-bottom: 0.03rem #02928E solid; } .header-wrap .nav a:hover{ border-bottom: 0.03rem #AEAEAE solid; } .header-wrap .nav-box{ /* min-height: 7.3rem; */ background: rgba(255,255,255); border-top: 1px solid #E1E1E1; position: absolute; left: 0; width: 100%; z-index: 999; } .header-wrap .nav-box .box{ display: none; box-shadow: 0rem 0.1rem 0.1rem rgba(0,0,0,0.1600); } /* ------------box1--------------------- */ .header-wrap .box1{ height: 100%; padding-bottom: .15rem; } .header-wrap .box1 .info{ margin: 0 auto; height: 100%; display: flex; justify-content: space-between; } .header-wrap .box1 .info .left{ padding: .2rem .2rem 0 0; width: 3.2rem; border-right: 1px solid #E1E1E1; } .header-wrap .box1 .info .left .list{ padding-bottom: .1rem; border-bottom: 1px solid #E6E6E6; } .header-wrap .box1 .info .left .list .item{ width: 3rem; height: 1.5rem; position: relative; margin-bottom: .2rem; } .header-wrap .box1 .info .left .list .item .bg{ width: 100%; height: 100%; } .header-wrap .box1 .info .left .list .item a{ display: flex !important; align-items: center; font-size: 0.2rem; color: #666666; position: absolute; left: .3rem; top: .4rem; } .header-wrap .box1 .info .left .list .item:hover a{ color: #00A19C; } /*.header-wrap .box1 .info .left .list .item:nth-of-type(2) a{*/ /* color: #00A19C;*/ /*}*/ .header-wrap .box1 .info .left .list .item a img{ width: 0.08rem;height: .14rem; margin-left: .09rem; display: block; } .header-wrap .box1 .info .left .list .item a .img1{ display: none; } .header-wrap .box1 .info .left .list .item a .img2{ display: block; } .header-wrap .box1 .info .left .list .item:hover a .img1{ display: block; } .header-wrap .box1 .info .left .list .item:hover a .img2{ display: none; } .header-wrap .box1 .info .left .more{ display: flex; align-items: center; font-size: 0.2rem; color: #666666; padding: .3rem 0 .3rem .3rem; } .header-wrap .box1 .info .left .more img{ width: 0.08rem;height: .14rem; margin-left: .09rem; display: block; } .header-wrap .box1 .info .center{ width: calc(100% - 3.3rem); display: flex; border-right: 1px solid #E1E1E1; } .header-wrap .box1 .info .center .list{ width: 2.93rem; border-right: 1px solid #E1E1E1; } .nav_list2{ width: 2.93rem; border-right: 1px solid #E1E1E1; } .header-wrap .box1 .info .center .list .item{ width: 100%; height: .45rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.15rem; color: #333333; padding: 0 .3rem; border-bottom: 1px #fff solid; cursor: pointer; } .header-wrap .box1 .info .center .list .item img{ width: 0.07rem;height: 0.13rem; } .header-wrap .box1 .info .center .list .item .img1{ display: block; } .header-wrap .box1 .info .center .list .item .img2{ display: none; } .header-wrap .box1 .info .center .list .item.act, .header-wrap .box1 .info .center .list .item:hover{ color: #00A19C; border-bottom: 1px #00A19C solid; } .header-wrap .box1 .info .center .list .item.act .img2, .header-wrap .box1 .info .center .list .item:hover .img2{ display: block; } .header-wrap .box1 .info .center .list .item.act .img1, .header-wrap .box1 .info .center .list .item:hover .img1{ display: none; } .header-wrap .box1 .info .center .list1{ width: 2.93rem } .header-wrap .box1 .info .center .list1 a{ font-size: 0.15rem; color: #333333; width: 100%; height: .45rem; display: flex; align-items: center; padding: 0 .3rem; border-bottom: 1px #fff solid; } .header-wrap .box1 .info .center .list1 a.act, .header-wrap .box1 .info .center .list1 a:hover{ color: #00A19C; border-bottom: 1px #00A19C solid; } .header-wrap .box1 .info .rig{ width: 2.92rem; padding: .17rem .3rem; border-right: 1px solid #E1E1E1; } .header-wrap .box1 .info .rig .title{ font-size: 0.2rem; color: #333333; } .header-wrap .box1 .info .rig .item{ padding: .1rem 0 0; /*border-bottom: 1px solid #EEEEEE;*/ cursor: pointer; } .header-wrap .box1 .info .rig .item img{ width: 100%; height: 1.6rem; border: 1px solid #EEEEEE; } .header-wrap .box1 .info .rig .item .tit{ font-size: 0.15rem; color: #333333; margin: .1rem 0 .06rem; } .header-wrap .box1 .info .rig .item .text{ font-size: 0.12rem; line-height: 0.2rem; color: #666666; } .header-wrap .box1 .info .rig .item:nth-of-type(1){ border-bottom: none; } .header-wrap .box1 .info .rig .more{ font-size: 0.15rem; color: #00A19C; margin-top: .26rem; width: 100%; text-align: center; } /* -------box2 ---------------------*/ .header-wrap .box2{ height: 100%; padding-bottom: .1rem; } .header-wrap .box2 .info{ margin: 0 auto; height: 100%; display: flex; justify-content: space-between; } .header-wrap .box2 .info .left, .header-wrap .box2 .info .rig{ width: 5.8rem; } .header-wrap .box2 .info .item{ padding: .2rem 0 0; border-bottom: 1px #EEEEEE solid; } .header-wrap .box2 .info .item .title{ display: flex; align-items: center; justify-content: space-between; padding-bottom: .2rem; margin-bottom: .2rem; } .header-wrap .box2 .info .item .title span{ font-size: 0.2rem; color: #333333; font-weight: bold; position: relative; } .header-wrap .box2 .info .item .title span:hover{ cursor: pointer; } .header-wrap .box2 .info .item .title span::after{ content: ''; width: .3rem; height: 1px; background-color: #00A19C; position: absolute; left: 0; bottom: -.2rem; } .header-wrap .box2 .info .item .title a{ display: flex; align-items: center; font-size: 0.15rem; color: #666666; } .header-wrap .box2 .info .item .title a img{ width: 0.05rem;height: .1rem;display: block; margin-left: .08rem; } .header-wrap .box2 .info .item .list{ display: flex; flex-wrap: wrap; } .header-wrap .box2 .info .item .list a{ font-size: 0.15rem; color: #333333; display: block; margin-bottom: .2rem; margin-right: 8% !important; width: 42%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all; white-space: normal !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .header-wrap .box2 .info .item .list a:nth-of-type(3n){ margin-right: 0; } .header-wrap .box2 .info .item .list a:hover{ color: #00A19C; } .header-wrap .box2 .info .left .item:nth-last-of-type(1), .header-wrap .box2 .info .rig .item:nth-last-of-type(1){ margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /* ---------boxs----------- */ .header-wrap .boxs{ display: block; display: flex; } .header-wrap .boxs .left{ width: 35%; background-color: #FBFBFB; display: flex; justify-content: flex-end; } .header-wrap .boxs .left .content{ width: 3.7rem; padding: .53rem .51rem 1.87rem 0; } .header-wrap .boxs .left .content .tit{ font-size: 0.24rem; font-weight: bold; color: #333333; margin-bottom: .5rem; } .header-wrap .boxs .left .content .text{ font-size: 0.16rem; line-height: 0.28rem; color: #333333; } .header-wrap .boxs .rig{ width: 65%; padding: .55rem 0 0 0.51rem; } .header-wrap .boxs .rig .content{ width: 7.79rem; } .header-wrap .boxs .rig .content .tit{ font-size: 0.2rem; color: #333333; border-bottom: 1px solid #E1E1E1; padding-bottom: .18rem; margin-bottom: .34rem; } .header-wrap .boxs .rig .content .list{ width: 100%; display: flex; flex-wrap: wrap; } .header-wrap .boxs .rig .content .list .item{ width: 50%; display: flex; align-items: center; margin-bottom: .33rem; } .header-wrap .boxs .rig .content .list .item img{ width: 0.5rem;height: 0.5rem; display: block; margin-right: .23rem; } .header-wrap .boxs .rig .content .list .item span{ font-size: 0.18rem; color: #333333; } .header-wrap .boxs .rig .content .list .item:hover span{ color: #00A19C; } .common-phone-header { display: none; } .side-wrap { display: none; } @media only screen and (max-width: 1024px) { /* body { padding: 0.9rem 0 1rem !important; } */ .header-wrap { display: none; } .common-phone-header { display: block !important; } .side-wrap { display: block !important; } /* 鎵嬫満瀵艰埅 */ .common-phone-header { position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; background: #fff; } .common-phone-header-inner { display: flex; height: 50px; border-bottom: 1px solid #eee; padding: 0 15px; justify-content: space-between; align-items: center; } .header-menu-phone{ height: 30px; } .header-logo-phone { height: 30px; } .header-search-phone { height: 30px; } /* 鎼滅储妗 */ .header-search-box-phone { display: none; } .header-search-input-phone { border-radius: 20px; height: 35px; border-width: 1px; border: 1px solid #333; padding: 0 10px; font-size: 14px; } /* 渚ц竟鏍忓鑸 */ .side-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; height: 100vh; width: 100vw; background:rgba(0, 0, 0, .5); } .side-container { display: none; position: fixed; z-index: 100000; left: 0; top: 0; height: 100vh; width: 6.4rem; background-color: #fff; color: #000; border-left: 1px solid #eee; animation: ani_side 1s; } .side-container.shown { display: block; } @keyframes ani_side{ from { display: none; width: 3rem; } to { display: block; width: 6.4rem; } } .side-wrap { width: 100%; } .side-top { display: flex; height: 60px; padding: 0 20px 0 30px; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; } .side-logo { width: 2rem; } .side-close { width:.48rem; } .side-bottom { padding: 0 .48rem 0 .72rem; } .nav-item-inner { display: flex; justify-content: space-between; align-items: center; /* padding: .27rem .48rem .27rem .72rem; */ padding: .27rem 0 .27rem 0; border-bottom: 1px solid #eee; } .nav-item-inner span{ display: flex; align-items: center; font-size: 14px; } .nav-item-inner img{ /* width: .48rem; */ width: .4rem; } .side-nav-list .nav-item a{ color: #000; font-size: .26rem; width: 100%; display: inline-block !important; } .side-nav-list .side-local-img { width: .3rem; margin-right: .2rem; vertical-align: text-bottom; } .side-nav-list-sub { display: none; } .side-nav-list-sub .side-back-img { width: .3rem; margin-right: .2rem; vertical-align: text-bottom; } .side-nav-list-main .nav-item:first-child{ /*display: none;*/ } .side-nav-list-main .nav-item:last-child{ /* display: none; */ } /* 浜у搧瀵艰埅 */ .nav-item-product-sub-list { /* padding-left: .3rem; */ /* border-bottom: 1px solid #eee; */ } .nav-item-product-sub-list > a > div{ padding: .2rem 0 .2rem .5rem; border-bottom: 1px solid #eee; } .nav-item-inner-product { /* border-bottom: none; */ } .nav-item-product-sub-list { display: none; } .arrow-down { display: none; } } /* pad 绔 */ @media screen and (min-width: 420px) and (max-width: 1024px) { .side-logo { width: 150px; } .side-close { width: 30px; } .nav-item-inner img { width: 30px; } }