.pdf-icon::before{content: 'P';width: 17px;height: 18px;background-color: #a3a3a3;border-radius: 3px;display: inline-block;text-align: center;color: #fff;font-weight: bold;line-height: 18px;margin-right: 7px;}

/* detail */
.detail h1{font-size: 30px;padding-bottom: 8px;}
.detail .collect{}
.detail .title{padding-bottom: 13px;color: #6b6b6b;display: flex;align-items: center;justify-content: space-between;padding-top: 10px;}
.detail .title h2{font-size: 18px;font-weight: bold;color: #6b6b6b;}
.detail .title a{color: #6b6b6b;margin-left: 10px;}
.detail .title a:hover{color: #c90000;}
.detail .title a:hover span::before{background-color: #c90000;}
.detail .title .icon-list{margin-left: 59px;}
.detail .title .icon-list::before{width: 17px;height: 18px;background-color: #a3a3a3;border-radius: 3px;display: inline-block;text-align: center;color: #fff;font-weight: bold;line-height: 18px;margin-right: 7px;}

.detail .cover{width: 237px;margin-right: 1px;border-top: 3px solid #c5c5c5;padding-top: 23px;text-align: center;float: left;}
.detail .cover img{max-width: 95%;}
.detail .cover + .introduce{width: 450px;border-top: 3px solid #e4e4e4;padding-left: 22px;}
.detail .introduce{width: 699px;float: left;border-top: 3px solid #c5c5c5;padding-top: 20px;}
.detail .introduce table{text-align: left;}
.detail .introduce table th{color: #6b6b6b;font-weight: normal;padding-right: 25px;height: 38px;}
.detail .introduce table td{display: flex;align-items: center;min-height: 38px;}
.detail .introduce table td img{width: 54px;margin-right: 5px;}
.detail .introduce table td.rohs{position: relative;padding-left: 28px;}
.detail .introduce table td.rohs::before{content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);background: url('../images/rohs.png') no-repeat 0 0;width: 22px;height: 25px;}
.detail .introduce table td.rohs.no::before{background-position-y: -25px;}
.detail .btns{margin-top: 10px;}
.detail .btns dl{display: flex;float: left;width: 49%;background-color: #f2f2f2;height: 35px;border-radius: 25px;align-items: center;}
.detail .btns dl:first-of-type{padding: 0 28px;color: #6b6b6b;margin-right: 8px;width: 237px;justify-content: space-between;}
.detail .btns dl:first-of-type dd{flex-shrink: 0;}
.detail .btns dl:first-of-type dd a{font-size: 20px;color: #a0a2a9;border-radius: 50px;width: 29px;height: 29px;display: inline-block;text-align: center;line-height: 29px;}
.detail .btns dl:first-of-type dd a:hover{background-color: #fff;color: #616265;}
.detail .btns dl:last-of-type{padding-left: 35px;padding-right: 3px;width: 183px;}
.detail .btns dl:last-of-type dd{margin-left: auto;}
.detail .btns dl:last-of-type dd button{width: 29px;height: 29px;border-radius: 50%;background-color: #fff;border: none;cursor: pointer;font-size: 22px;font-weight: bold;color: #919191;}
.detail .btns dl:last-of-type dd button:hover{color: #616161;}
.detail .cover + .introduce + .tips{width: 712px;padding-left: 20px;}
.detail .tips{width: 700px;float: right;border-top: 3px solid #e4e4e4;padding-top: 20px;}
.detail .tips h3{font-size: 17px;font-weight: bold;color: #6b6b6b;padding-top: 10px;padding-bottom: 10px;}
.detail .tips s{color: #6b6b6b;line-height: 22px;}
.detail .tips s span,.detail .tips s a{color: #232323;text-shadow: 0 0 black;}
.detail .tips h4{color: #6b6b6b;display: flex;justify-content: space-between;padding-top: 43px;}
.detail .tips h4 p:first-of-type{font-size: 16px;color: #232323;}
.detail .tips h4 b{color: #232323;}
.detail .tips table{text-align: left;margin-top: 13px;width: 100%;}
.detail .tips table tbody{display: flex;}
.detail .tips table tr{margin-right: 3px;width: 25%;}
.detail .tips table th{font-weight: normal;height: 28px;background-color: #f2f2f2;padding-left: 3px;display: block;line-height: 28px;}
.detail .tips table td{height: 37px;font-size: 13px;color: #6b6b6b;text-shadow: 0 0 0.5px;padding-left: 3px;}
.detail .tips .btns{margin-top: 28px;}
.detail .rfq-tip{padding-top: 54px;}
.detail .rfq-tip h3{font-size: 20px;font-weight: bold;color: #232323;}

.detail .quick{padding-top: 45px;color: #6b6b6b;padding-bottom: 67px;}
.detail .quick h2{font-size: 20px;font-weight: bold;color: #232323;padding-bottom: 8px;}
.detail .quick > p{font-size: 18px;color: #232323;float: right;font-family: "Ebrima";margin-top: 18px;display: flex;line-height: 30px;}
.detail .quick > p span{font-size: 22px;color: #a0a0a0;font-family: "Ebrima";display: inline-block;margin-left: 4px;}
.detail .request-form{display: flex;flex-wrap: wrap;justify-content: space-between;}
.detail .request-form ul.w33{width: calc(100% / 3 - 7px);}
.detail .request-form ul.w33 li{width: 100%;margin-bottom: 11px;}
.detail .request-form ul li.mess{height: calc(100% - 11px);}
.detail .request-form p{margin-top: 12px;}
.detail .request-form button{text-transform: uppercase;font-size: 18px;padding: 11px 80px;width: auto;margin-left: auto;margin-top: 0;}

.detail .specs{padding-bottom: 56px;border-bottom: 1px solid #e4e4e4;}
.detail .specs .pdf-list{float: left;width: 458px;}
.detail .specs .pdf-list h2{font-size: 24px;font-weight: bold;padding-bottom: 5px;}
.detail .specs .pdf-list s{font-size: 15px;color: #6b6b6b;line-height: 22px;}
.detail .specs .pdf-list s span{color: #232323;}
.detail .specs .pdf-list ul{padding-top: 60px;}
.detail .specs .pdf-list ul li{color: #6b6b6b;margin-bottom: 25px;}
.detail .specs .pdf-list ul li a{color: #6b6b6b;}
.detail .specs .pdf-list ul li a:hover{color: #c90000;}
.detail .specs .pdf-list ul li a:hover span::before{background-color: #c90000;}

.detail .specs .specs-list{float: right;width: 930px;padding-top: 10px;}
.detail .specs .specs-list ul{column-count: 2;}
.detail .specs .specs-list ul li{position: relative;margin-bottom: 18px;padding-left: 14px;}
.detail .specs .specs-list ul li::before{content: '';position: absolute;left: 0;top: 4px;width: 5px;height: 5px;border-radius: 50%;background-color: #2d3041;}
.detail .specs .specs-list ul li span{color: #6b6b6b;}

.detail .pro-details{padding: 70px 0 0;}
.detail .pro-details h2{font-size: 24px;font-weight: bold;float: left;}
.detail .pro-details h2 s{font-size: 16px;color: #6b6b6b;font-weight: normal;}
.detail .pro-details .text{float: right;width: 930px;line-height: 24px;color: #6b6b6b;}

.detail .relate-pro{padding-top: 70px;}
.detail .relate-pro h2{font-size: 24px;font-weight: bold;padding-bottom: 25px;}

.detail .purchase{background-color: #f7f7f7;padding-top: 65px;padding-bottom: 70px;}
.detail .purchase h2{font-size: 24px;font-weight: bold;position: relative;padding-bottom: 69px;}
.detail .purchase h2::before{content: '';width: 40px;height: 4px;background-color: #b0b2b7;position: absolute;left: 0;top: 49px;}
.detail .purchase .content{column-count: 2;column-gap: 50px;}
.detail .purchase dl{-webkit-column-break-inside: avoid;padding-bottom: 8px;}
.detail .purchase dt{font-size: 17px;font-weight: bold;font-family: "Ebrima";padding-bottom: 12px;}
.detail .purchase dd{margin-bottom: 25px;line-height: 21px;color: #6b6b6b;}
.detail .purchase dl:first-of-type dd{padding-left: 10px;position: relative;}
.detail .purchase dl:first-of-type dd::before{content: '';width: 5px;height: 5px;position: absolute;left: 0;top: 4px;border-radius: 50%;background-color: #888a93;}
.detail .purchase a{padding-top: 105px;display: inline-block;padding-bottom: 2px;border-bottom: 1px dashed #323333;}
.detail .purchase a:hover{border-color: #c90000;}

.detail .tags{padding-top: 59px;padding-bottom: 51px;}
.detail .tags .tabs{display: flex;margin-bottom: 25px;padding-bottom: 25px;}
.detail .tags .tabs li{width: 50%;font-size: 18px;color: #8a8a8a;font-weight: bold;cursor: pointer;line-height: 42px;transition: all .3s;}
.detail .tags .tabs li.act, .detail .tags .tabs li:hover{color: #232323;font-size: 24px;position: relative;}
.detail .tags .tabs li.act::before{content: '';width: 40px;height: 4px;background-color: #b0b2b7;position: absolute;left: 0;top: 54px;}
.detail .tags .content ul{display: none;}
.detail .tags .content ul.block{display: block;}
.detail .tags .content ul:first-of-type li{float: left;width: calc(100% / 4 - 10px);margin-right: 10px;margin-bottom: 18px;font-size: 15px;color: #6b6b6b;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.detail .tags .content ul:first-of-type li:nth-child(4n+4){margin-right: 0;}
.detail .tags .content ul:last-of-type li{width: calc(100% / 6 - 10px);margin-right: 10px;float: left;position: relative;margin-bottom: 16px;}
.detail .tags .content ul:last-of-type li:nth-child(6n+6){margin-right: 0;}
.detail .tags .content ul li a{color: #6b6b6b;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.detail .tags .content ul li .dialog{position: absolute;left: 0;top: 16px;background-color: #fff;width: 261px;height: 55px;box-shadow: 0 0 8px rgb(0, 0, 0,0.25);z-index: 1;padding: 2px;display: none;}
.detail .tags .content ul li .dialog .box{border: 1px solid #c90000;float: left;width: 51px;height: 51px;margin-right: 9px;text-align: center;line-height: 48px;overflow: hidden;}
.detail .tags .content ul li .dialog .box img{vertical-align: middle;max-width: 90%;max-height: 90%;}
.detail .tags .content ul li .dialog h3{font-weight: bold;color: #333333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-top: 6px;padding-bottom: 3px;}
.detail .tags .content ul li .dialog h4{color: #6b6b6b;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.detail .tags .content ul li a:hover + .dialog{display: block;}

/* list */
.list .head{background-color: #f7f7f7;padding: 0 14px 30px;}
.list .head h1{font-size: 23px;font-weight: normal;color: #191d2d;text-shadow: 0 0 0.5px;padding-bottom: 8px;}
.list .head s{color: #6b6b6b;}
.list .head s span{color: #232323;}
.list .page{padding-bottom: 43px;justify-content: center;}
.list .rec-brands{background-color: #f7f7f7;padding: 41px 13px 39px;}
.list .rec-brands h2{font-size: 18px;padding-bottom: 38px;}
.list .rec-brands h2 span{font-size: 19px;color: #232323;font-family: "Ebrima";text-shadow: 0 0 0.5px;}
.list .rec-brands ul li{float: left;width: calc(100% / 6 - 18px);height: 154px;margin-right: 18px;}
.list .rec-brands ul li a{display: block;height: 100%;background-color: #fff;text-align: center;position: relative;}
.list .rec-brands ul li a img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);transition: all .3s;max-width: 90%;}
.list .rec-brands ul li a:hover img{transform: translate(-50%,-50%) scale(1.1);}

/* search-result */
.result{padding-bottom: 25px;}
.result .head{padding-bottom: 11px;}
.result .head h1{text-align: left;color: #191d2d;font-size: 22px;font-weight: normal;padding-bottom: 15px;}
.result .head h1 span{font-size: 23px;color: #191d2d;}
.result .head > s{float: left;padding-top: 10px;color: #6b6b6b;}
.result .head > s span{color: #232323;}
.result .page{justify-content: flex-end;}


/* categories */
.categories{position: relative;}
.categories .daohang{position: fixed;left: 0;top: 190px;display: flex;float: left;}
.categories .daohang .left{width: 0;overflow: hidden;background-color: #fff;}
.categories .daohang.act .left{padding: 15px 8px;border: 1px solid #9699a6;border-left: none;}
.categories .daohang .left ul{overflow: auto;height: 650px;}
.categories .daohang .left ul li{color: #6b6b6b;margin-bottom: 13px;cursor: pointer;}
.categories .daohang .left ul li:hover{color: #c90000;}
.categories .daohang .right{width: 36px;height: 73px;background-color: #9699a6;color: #fff;border-radius: 0 5px 5px 0;cursor: pointer;}
.categories .daohang .right s{display: block;height: 36px;text-align: center;line-height: 36px;font-size: 20px;}
.categories .daohang.act .right s:last-child::before{content: '\f100';}
body.sticky-top .categories .daohang{position: absolute;left: 0;bottom: 50px;top: unset !important;}
.categories .liebiao{margin: 0 auto;}
.categories .liebiao h1{font-size: 32px;color: #191d2d;line-height: 42px;padding-bottom: 20px;padding-top: 10px;}
.categories .liebiao dl{margin-bottom: 30px;}
.categories .liebiao dt{padding: 18px 0;border: 1px solid #e7e7e7;border-left: none;border-right: none;display: flex;margin-bottom: 23px;align-items: center;}
.categories .liebiao dt .left{width: 50%;padding: 0 23px 0 0;}
.categories .liebiao dt .left img{float: left;margin-right: 27px;}
.categories .liebiao dt .left h2{font-size: 23px;color: #191d2d;text-shadow: 0 0 0.5px;padding-bottom: 11px;padding-top: 6px;}
.categories .liebiao dt .left s{color: #6b6b6b;}
.categories .liebiao dt .left s span{color: #232323;}
.categories .liebiao dt .right{width: 50%;padding-left: 19px;border-left: 1px solid #e7e7e7;}
.categories .liebiao dt .right s{color: #828282;display: inline-block;padding-bottom: 11px;}
.categories .liebiao dt .right ul{display: flex;justify-content: space-between;}
.categories .liebiao dt .right ul li{width: calc(100% / 4 - 8px);text-align: center;height: 65px;line-height: 65px;}
.categories .liebiao dt .right ul li a{display: block;overflow: hidden;}
.categories .liebiao dt .right ul li img{max-width: 90%;vertical-align: middle;transition: all .3s;}
.categories .liebiao dt .right ul li a:hover img{transform: scale(1.1);}
.categories .liebiao dd{overflow: hidden;}
.categories .liebiao dd a{float: left;width: calc(100% / 3 - 30px);margin-bottom: 8px;line-height: 18px;}
.categories .liebiao dd a:nth-child(3n+3){margin-right: 0;}
.categories .liebiao dd a span{color: #828282;}
@media screen and (max-width: 768px) 
{
    /* detail */
    .detail{padding: 0 2%;}
    .detail .title .right{display: none;}
    .detail .cover{width: 100%;}
    .detail .cover + .introduce{padding-left: 0;width: 100%;}
    .detail .btns dl{margin-right: 0;margin-bottom: 12px;}
    .detail .cover + .introduce + .tips{width: 100%;padding-left: 0;}
    .detail .tips table tr{float: left;width: 50%;display: flex;flex-direction: column;}
    .detail .tips table th{margin-bottom: 1px;line-height: 28px;padding-left: 14px;}
    .detail .tips table td{display: block;height: 28px;line-height: 28px;margin-bottom: 1px;padding-left: 14px;}
    .detail .request-form ul li{margin-bottom: 11px;}
    .detail .request-form ul.w33{width: 100%;}
    .detail .quick p{margin-top: 0;margin-bottom: 18px;}
    .detail .specs{padding-bottom: 20px;}
    .detail .specs .pdf-list{float: unset;width: 100%;}
    .detail .specs .pdf-list ul{padding-top: 20px;}
    .detail .specs .specs-list{width: 100%;}
    .detail .specs .specs-list ul{column-count: 1;}
    .detail .pro-details h2{padding-bottom: 16px;}
    .detail .pro-details .text{width: 100%;}
    .detail .purchase{background-color: #fff;padding: 20px 0;}
    .detail .purchase .content{column-count: 1;}
    .detail .tags .content ul li{width: 100%;margin-right: 0;}

    /* list */
    .list .rec-brands ul li{width: 49%;margin-right: 1%;margin-bottom: 4px;}

    /* search-result */
    .result .head{padding: 20px 2%;}
    .result .head h1{padding-bottom: 0;padding-top: 10px;}
    .result .head > s{padding-top: 0;padding-bottom: 12px;float: unset;margin-bottom: 20px;display: block;}
    .result .page{justify-content: center;}

    /* categories */
    .categories{}
    .categories .daohang{display: none;}
    .categories .liebiao{padding: 20px 2%;}
    .categories .liebiao dt{flex-wrap: wrap;padding: 8px 0;}
    .categories .liebiao dt .left{width: 100%;padding-bottom: 10px;padding: 0 0 10px;}
    .categories .liebiao dt .left img{max-width: 65px;}
    .categories .liebiao dt .left h2{font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .categories .liebiao dt .right{width: 100%;border-left: none;border-top: 1px solid #e7e7e7;padding: 10px 0 0;}
    .categories .liebiao dd a{width: 100%;}
}