/*brand-nav*/
.brand-nav{width: 1200px;margin: 10px auto; background: #fff;border-radius: 8px;font-size: 13px;}
.brand-nav .tit{color: #152030;font-size: 16px;font-weight: 500;display: flex;justify-content: start;align-items: center;height: 45px;line-height: 45px;padding:10px 0 5px 0; margin: 10px 0 0px 0; border-bottom: 1px solid #eee;}
.brand-nav .tit::before{content: "";border-radius: 10px;background: #0086f6;display: inline-block;height: 100%;width: 5px;margin:0 10px 0 1px;}
.brand-nav .tit h2{color: #0086f6;font-weight: 600;font-size: 16px;}

.nav-body{display: flex;flex-wrap: wrap;justify-content: flex-start; padding: 10px;}
.brand-nav .nav-body a{border:1px solid #f8f8f8;width: 145px;margin: 10px 10px;padding: 5px;font-weight: 500;display: flex;flex-direction: row;justify-content: start;align-items: center;color: #152030;border-radius: 3px;background: #f8f8f8;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.brand-nav .nav-body a img{height: 40px;width: 40px; overflow: hidden;transition: transform .3s ease 0s;-o-object-fit: cover;object-fit: cover;}
.brand-nav .nav-body a span{color: #152030;font-size: 13px;font-weight: 500;}
.brand-nav .nav-body a.on{color: #0086f6;background-color: #e5f2fe;}
.brand-nav .nav-body a.on span{color: #0086f6;}
.brand-nav .nav-body a:hover{border:1px solid #0086f6;}
.brand-nav .nav-body a:hover img{ -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);transition-duration: .8s;}
.brand-nav .nav-body a:hover span{color: #0086f6;}

/*brand-body*/
.brand-body{width: 1200px;margin: 10px auto;background: #fff;border-radius: 8px;font-size: 13px;}
.brand-body .company{padding: 10px 20px;}
.brand-body .company .tit{text-align: center;display: flex;justify-content: start; align-items: center;}
.brand-body .company .tit img{height: 45px;}
.brand-body .company .tit h1{font-size: 16px;font-weight: 500;}
.brand-body .company .tit .ename{color: #69798c;font-size: 12px;}
.brand-body .company .binfo{line-height: 26px;font-size: 13px;text-indent: 2em;margin: 20px; padding: 0px 25px;position: relative;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;display:-moz-box;-moz-box-orient:vertical;-moz-line-clamp: 2;display:box;box-orient:vertical;line-clamp: 2;overflow: hidden;}
.brand-body .company .binfo .ec{font-style: normal;cursor: pointer;}
.brand-body .company .binfo .ec{font-size: 12px; position: absolute;right: 25px;bottom: 0;color: #0086f6;background: #fff;display:inline-block;}
.brand-body .company .binfo.on{-webkit-line-clamp: inherit;}
.brand-body .company .binfo.on .ec::after{font-size: 12px;}

.list-wrap{padding: 20px;}
.list-wrap .brand-left{width: 890px;float: left;background: #fff;}
.list-wrap .brand-right{width: 250px;float: right;background: #f9fbfd;border: 1px solid #eaeef3;}
/*   */
.brand-left{border-radius: 8px;padding: 10px 0;}
.brand-left .tit{height: 35px;padding: 5px 10px;display: flex;align-items: center; border-bottom: 1px solid #eee;font-size: 18px;color: #0086f6;}
.brand-left .tit::before{content: "";border-radius: 10px;background: #0086f6;display: inline-block;height: 100%;width: 5px;margin:0 10px 0 1px;}
.brand-left .tit h2{color: #0086f6;font-weight: 600;font-size: 16px;}
.left-body{padding: 10px 20px;}
.left-body ul li{margin: 20px 0; color: #152030;border: 1px solid #eaeef3;background: #f9fbfd; line-height: 22px; padding: 15px;border-radius: 8px; display: flex;justify-content: start;transition: all 0.5s ease;}
.left-body ul li:hover{ transform: translateY(-5px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);}
.left-body ul li img{width: 175px;height: 175px;border-radius: 5px; overflow: hidden;transition: transform .3s ease 0s;-o-object-fit: cover;object-fit: cover;}
.left-body ul li:hover img {transform: scale(1.05);}

.left-body ul li .info{flex: 1;margin-left: 20px;display: flex;flex-direction: column;}
.left-body ul li .info .yname{font-size: 16px;font-weight: 600;}
.left-body ul li .info .ename{font-size: 14px;margin-left: 5px;color: #69798c;font-weight: normal;}

.left-body ul li .info .rname{font-size: 14px;font-weight: 400;line-height: 22px;padding: 10px 0;}
.left-body ul li .info .rname i{color: #4dabf7;margin-right: 5px;font-size: 16px;}

.left-body ul li .info .ydate{color: #304659;height: 22px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.left-body ul li .info .ydate i{color: #4dabf7;font-size: 12px;margin-right: 5px;font-weight: 400;}

.left-body ul li .info .ts-lable{margin-top: 10px;}
.left-body ul li .info .ts-lable span{font-size: 13px;color: #0086f6;font-weight: 400;background: #e5f4ff;cursor: pointer; display: inline-block;padding: 3px 10px;border-radius: 5px;margin: 0px 5px 5px 0;}
.left-body ul li .info .ts-lable span:hover{background: #d0eafc;}

.left-body ul li .pars{background: #f7f7f7;border: 1px solid #f7f7f7;padding: 5px 0px;font-size: 12px; display: flex;justify-content: space-between;margin: 10px 0px;}
.left-body ul li .pars:hover{border: 1px solid #d0eafc;}
.left-body ul li .pars .item{flex: 1;border-right: 1px solid #eee;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.left-body ul li .pars .item span{color: #69798c;}
.left-body ul li .pars .item span a{color: #69798c;}
.left-body ul li .pars .item span a:hover{color: #0086f6;}
        
.left-body ul li .por{display: flex;justify-content: end;align-items: center;}
.left-body ul li .por .price{text-align: right;color: #ff0000;font-size: 12px;}
.left-body ul li .por .price .num{font-size: 22px;}
.left-body ul li .por .price .fh{font-size: 12px;font-style: normal;}
.left-body ul li .por .price .qi{font-size: 12px;}
.left-body ul li .por a{padding: 5px 15px;background: #0086f6;background:linear-gradient(to left, rgb(0, 118, 245) 0%, rgb(0, 167, 250) 100%);color: #fff;border-radius: 5px;margin-left: 30px;}
.left-body ul li .por a:hover{opacity: 0.75;}
.left-body ul li:hover a{animation: move 1s;animation-iteration-count: 1;}
@keyframes move {0% {transform: translateX(0);} 50% {transform: translateX(-20px);} 100% {transform: translateX(0);}}


/* ? */
.brand-right{border-radius: 8px;padding: 0;}
.contact{width: 100%;padding: 10px 20px;}
.contact .tit{font-size: 16px;color: #1a3c5e;font-weight: 600;letter-spacing: 1px;height: 35px;line-height: 35px;border-bottom: 2px solid #2a7de1;}
.contact ul li{font-weight: 500; margin: 10px 0;border-radius: 5px; background: #fff;border: 1px solid #eaeef3;transition: all 0.2s ease;padding: 15px 15px;display: flex;justify-content: start;align-items: center; font-size: 16px;color: #1a3c5e;}
.contact ul li:hover {background-color: #f0f7ff;transform: translateX(5px);}
.contact ul li a{color: #1a3c5e;font-size: 13px;font-weight: 600;}
.contact ul li a:hover{color: #0086f6;}
.contact ul li i{font-size: 16px;margin-right: 10px;}
.contact ul li:last-child i{font-size: 22px;font-weight: 500;}

/*    */
.guar{width: 100%;padding: 10px 20px;margin-top: 10px;}
.guar .tit{font-size: 16px;color: #1a3c5e;font-weight: 600;letter-spacing: 1px;height: 35px;line-height: 35px;border-bottom: 2px solid #2a7de1;}
.guar ul li{margin: 15px 0;border-radius: 5px; background: #fff;border: 1px solid #eaeef3;transition: all 0.2s ease;padding:10px 15px;display: flex;flex-direction: column; justify-content: start;align-items: start; font-size: 12px;color: #1a3c5e;}
.guar ul li:hover {background-color: #f0f7ff;}
.guar ul li span{margin-top: 10px; color: #1a3c5e;font-size: 13px;}
.guar ul li div{font-size: 16px;font-weight: 600;}
.guar ul li div i{font-size: 20px;margin-right: 5px;font-weight: 400;}