/* categories */
.categories{margin-bottom: 30px;}
.categories h1 {font-size: 30px;color: #222222;}
.categories .head{width: 100%;padding-left: 100px;height: 65px;background: #8f93a9;color: #fff;position: relative;font-size: 14px;margin-top: 40px;}
.categories .head .image-box{width: 79px;height: 79px;background: #ffffff;border: 1px solid #696e86;position: absolute;left: 10px;bottom: 6px;text-align: center;line-height: 79px;}
.categories .head .image-box img{max-width: 100%;max-height: 100%;display: inline-block;vertical-align: middle;}
.categories .head b{display: block;font-size: 18px;padding-top: 8px;font-family: Tahoma;}
.categories .head span{font-weight: bold;}
.categories .content{display: flex;border: 1px solid #e7e7e7;flex-wrap: wrap;}
.categories .content .left{width: 28%;flex-shrink: 0;border-right: 1px solid #e7e7e7;}
.categories .content .left dl{display: flex;flex-wrap: wrap;}
.categories .content .left dl dt{width: 100%;height: 53px;font-size: 15px;font-family: Tahoma;font-weight: bold;color: #313544;margin-left:18px;line-height: 53px;}
.categories .content .left dl dd{width: 50%;}
.categories .content .left dl dd{border-top: 1px solid #e7e7e7;border-right: 1px solid #e7e7e7;border-bottom: 1px solid #e7e7e7;line-height: 20px;margin-bottom: -1px;line-height: 20px;text-align: center;display: block;padding-bottom: 15px;}
.categories .content .left dl dd:nth-of-type(2n){border-right: none;}
.categories .content .left dl dd img{max-width: 100px;max-height: 100px;margin: 20px auto;}
.categories .content .left dl dd a{display: block;color: #313544;font-size: 14px;font-weight: bold;}
.categories .content .left dl dd s{text-decoration: none;color: #6f6f6f;margin-bottom: 15px;font-size: 13px;}
.categories .content .left dl dd a:hover{color: #ff6d0c;}

.categories .content .right{width: 72%;flex-shrink: 0;padding: 20px;padding-bottom: 15px;}
.categories .content .right dl{display: flex;flex-wrap: wrap;justify-content: space-between;}
.categories .content .right dl dd{width: 50%;margin-top: 10px;}
.categories .content .right dl dd a{font-size: 14px;color: #111;}
.categories .content .right dl dd a span{color: #a2a6b1;margin-left: 5px;}
.categories .content .right dl dd a:hover{color: #ff6d0c;}

/* list */
.list{margin-bottom: 30px;}
.list h1{color: #222222;font-weight: bold;margin-bottom: 15px;font-size: 26px;width: 100%;display: block;}
.list h1 span{float: right;font-size: 17px;line-height: 29px;font-weight: normal;}
.list h1 a{float: right;font-size: 13px;width: fit-content;height: 30px;line-height: 30px;text-align: center;padding: 0 20px;color: #323554;font-size: 13px;font-weight: bold;letter-spacing: 1px;border: 1px solid #e0e0e0;margin-left: 8px;border-radius: 4px 4px 4px 4px;background: #ffffff;cursor: pointer;}
.list h1 a.actived, .list h1 a:hover{font-weight: bold;color: #6a6f8a;border: 1px solid #9295a9;background-color: inherit;}
.list .mark h2{width: 100%;height: 35px;color: #fff;font-size: 18px;font-weight: bold;line-height: 35px;color: #ffffff;background: #a8aab7;padding-left: 10px;}
.list .mark ul{display: flex;flex-wrap: wrap;}
.list .mark ul li{height: 124px;overflow: hidden;font-size: 13px;color: #868a97;flex-basis: calc(100% / 4);border-bottom: 1px solid #e7e7e7;}
.list .mark ul li.make{width: 25%;}
.list .mark ul li .image-box{float: left;height: 124px;line-height: 124px;vertical-align: middle;margin-right: 20px;}
.list .mark ul li .image-box img{display: inline-block;vertical-align: middle;}
.list .mark ul li a{font-size: 14px;margin: 20px 0 10px;font-weight: bold;color: #0a0a0a;display: block;}
.list .mark ul li a:hover{color: #ff6d0c;}
.list .mark ul li span{font-weight: bold;}
.list .mark ul li a.btn{display: inline-block;width: fit-content;height: 30px;color: #323554;font-size: 13px;font-weight: bold;letter-spacing: 1px;border: 1px solid #e0e0e0;border-radius: 4px 4px 4px 4px;background: #ffffff;cursor: pointer;padding: 0 20px;margin-top: 10px;line-height: 30px;text-align: center;}
.list .mark ul li a.btn::before{margin-right: 12px;transform: rotate(-45deg);padding-top: 7px;}
.list .mark ul li a.btn:hover{background-color: #595c75;color: #fff;}
.list .another-products h2{color: #222222;font-weight: bold;font-size: 24px;margin: 10px 0;}
.list .another-products ul{width: 100%;padding-top: 5px;border-top: 3px solid #8f93a9;display: flex;flex-wrap: wrap;}
.list .another-products ul li{width: calc(100% / 6);}
.list .another-products ul li a{font-size: 14px;line-height: 30px;color: #868a97;}
.list .another-products ul li a:hover{color: #ff6d0c;}


/* details */
.details .breadcrumbs a{color: #fff;}
.details .top{background-color: #373844;}
.details .top .left{float: left;width: 23%;}
.details .top .left .white-box{background-color: #fff;text-align: center;}
.details .top .left .image-box{width: 100%;padding: 10px;border-bottom: 1px dashed #e7e7e7;}
.details .top .left .image-box img{max-width: 100%;}
.details .top .left .bottom{padding: 8px 10px;display: flex;align-items: center;justify-content: space-between;}
.details .top .left .bottom a{font-size: 14px;color: #9498a4;width: 50%;}
.details .top .left .bottom a:hover{color: #ff6d0c;}
.details .top .left s{text-decoration: none;display: block;background-color: #3e3f4c;min-height: 100px;padding: 15px;font-size: 14px;color: #a2a6b1;text-align: center;}
.details .top .left > a{height: 32px;display: flex;align-items: center;justify-content: center;color: #fff;background: none;border: none;border-radius: 20px;padding: 0 20px;font-size: 13px;font-weight: bold;box-shadow: inset -2px -2px 10px -2px rgb(255 255 255 / 75%);
margin: 30px auto 20px;}
.details .top .left > a::before{margin-right: 8px;font-size: 18px;font-weight: bold;}
.details .top .left > a:hover{background-color: #ff7e00;}
.details .top .right{float: right;width: 75.5%;}
.details .top .right h1{width: 100%;font-size: 23px;font-weight: bold;color: #ffffff;margin-bottom: 10px;}
.details .top .right span{display: flex;flex-wrap: wrap;justify-content: space-between;}
.details .top .right dl{width: 49%;font-size: 14px;color: #fff;border-top: 1px dashed #e7e7e740;padding: 10px 0 10px 3px;border-bottom: 1px dashed #e7e7e7;border-color: #e7e7e720;}
.details .top .right dt{float:left;width: 32%;color: #a5a6ac;font-size:14px;}
.details .top .right dd{float:left;font-size:14px;width: 350px;}
.details .top .right dd a{font-size: 14px;color: #a2a6b1;text-decoration: underline;color: #ff7e00;}
.details .top .right dd a:hover{color: #ff6d0c;}
.details .top .right dd.pdf a{display:inline-block;margin-right:15px;}
.details .top .right h2{color: #a2a6b1;font-size: 14px;margin-top: 20px;margin-bottom: 10px;}
.details .top .right h2 b{font-size: 16px;color: #fff;display: block;}
.details .top .right h2 a{color: #fff;}
.details .top .right h2 a:hover{text-decoration: underline;color: #ff6d0c;}
.details .top .right .stock-table{overflow-y: auto;}
.details .top .right .stock-table table{width: 100%;table-layout: fixed;text-align: center;}
.details .top .right .stock-table table thead td{height: 32px;background: #4b4c57;color: #fff;}
.details .top .right .stock-table table td{width: 70px;height: 32px;color: #ff7e00;background: #41424e;}
.details .top .right form .head{width: 100%;min-height: 68px;background: #2b2c3880;border-radius: 4px;position: relative;z-index: 0;padding: 10px 0;display: flex;flex-wrap: wrap;align-items: center;}
.details .top .right form .head::before{content: '';position: absolute;bottom: -18px;right: 7px;width: 59px;height: 48px;background-image: url('../images/icon-arrow-black.jpg');z-index: -1;}
.details .top .right form .head li{width: 40%;padding-bottom: 10px;margin-left: 10px;
border-bottom: 1px solid #5c5d6f;display: flex;align-items: center;height: 40px;}
.details .top .right form .head .total{font-size: 18px;color: #fff;font-weight: bold;font-style: italic;width: 175px;margin-left: 15px;border: none;}
.details .top .right form .head .total b{color: #ff7e00;font-size: 27px;}
.details .top .right form ul{justify-content: space-between;}
.details .top .right form ul li{width: 49%;}
.details .top .right form ul li.message{width: 100%;}
.details .top .right form ul li label{color: #fff;}
.details .top .right form ul li input{color: #fff;}
.details .top .right form ul li textarea{background-color: transparent;outline: none;width: 100%;min-height: 80px;padding-left: 20px;color: #fff;font-size: 13px;line-height: 1.5;border: none;height: 100px;padding-top: 7px;}

.details .logistics-info{display: flex;align-items: flex-end;position: relative;margin-top: 20px;}
.details .logistics-info .left{width: 85%;min-height: 560px;color: #868a97;font-size: 14px;line-height: 20px;background: #ffffff;border: 1px solid #595b6a;padding: 15px 30px 20px 15px;display: none;}
.details .logistics-info .left.actived{display: block;}
.details .logistics-info .left h2{text-align: left;margin-top: 10px;margin-bottom: 10px;color: #222222;font-weight: bold;font-size: 14px;}
.details .logistics-info .left ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
.details .logistics-info .left ul li{position: relative;width: 24%;margin-top: 20px;font-size: 14px;color: #fff;cursor: pointer;}
.details .logistics-info .left ul li img{width: 100%;height: 100%;}
.details .logistics-info .left ul li .mask{position: absolute;bottom: 0;left: 0;right: 0;width: 100%;background: #37384480;color: #fff;padding: 10px 15px;font-size: 14px;opacity: 0;}
.details .logistics-info .left ul li b{display: inline-block;font-size: 18px;color: #fff;}
.details .logistics-info .left ul li:hover .mask{opacity: 1;transition: 0.5s;}
.details .logistics-info .left img.after-sales-icon{float: left;margin-right: 8px;margin-top: 10px;display: block;}
.details .logistics-info .right{width: 15%;background: #595b6a;color: #fff;padding-top: 10px;height: 90%;position: absolute;right: 0;flex-shrink: 0;}
.details .logistics-info .right li{width: 100%;height: 44px;line-height: 44px;font-size: 14px;text-align: center;cursor: pointer;}
.details .logistics-info .right li.actived{background: #41414d;margin-left: -20px;padding-left: 40px;font-weight: bold;}
.details .principle dl{display: flex;flex-wrap: wrap;justify-content: space-between;}
.details .principle dl dt{width: 100%;text-align: center;margin-top: 20px;margin-bottom: 10px;color: #222222;font-weight: bold;font-size: 20px;border-bottom: 3px solid #8f93a9;display: block;padding-bottom: 10px;}
.details .principle dl dd{width: 49%;padding: 10px 0 10px 3px;border-bottom: 1px dashed #e7e7e7;font-size: 13px;color: #677283;}
.details .principle dl dd span{width: 32%;color: #a5a6ac;display: inline-block;}

.details .linked-products h2{text-align: center;margin-top: 20px;margin-bottom: 10px;color: #222222;font-weight: bold;font-size: 20px;padding-bottom: 10px;border-bottom: 3px solid #8f93a9;}

@media screen and (max-width: 768px)
{
    /* .categories */
    .categories.limit{width: 100%;}
    .categories h1{padding-left: 8px;}
    .categories .content .left{width: 100%;}
    .categories .content .right{width: 100%;padding: 20px 8px;}
    .categories .content .right dl dd{width: 100%;}
    /* .list */
    .list .limit{width: 100%;padding: 0 8px;}
    .list h1{font-size: 20px;margin-bottom: 10px;}
    .list h1 > *{display: none;}
    .list .mark ul{flex-direction: column;}
    .list .mark ul li{min-width: 100%;}
    .list .another-products ul li{width: 50%;}
    /* details */
    .details .top .limit{width: 100%;}
    .details .top .left{width: 100%;padding: 0 8px;}
    .details .top .right{width: 100%;padding: 0 8px;}
    .details .top .right dl{width: 100%;}
    .details .top .right dt{width: 44%;}
    .details .top .right form ul li{width: 100% !important;}
    .details > .limit{width: 100%;padding: 0 8px;}
    .details .logistics-info{margin-top: 70px;}
    .details .logistics-info .left{width: 100%;height: auto;min-height: 100px;}
    .details .logistics-info .left ul li .mask{display: none;}
    .details .logistics-info .right{width: 100%;height: 44px;top: -44px;padding-top: 0;}
    .details .logistics-info .right li{display: inline-block;width: 31%;}
    .details .logistics-info .right li.actived{margin: 0;padding: 0;}
    .details .principle dl dd{width: 100%;}
    .details .principle dl dd span{width: 50%;}
}