@import "./base.css";

.list-pro {margin-top:50px}
.list-nav ul{display: block; border-bottom: 1px dashed #fff; position: relative; padding: 15px 24px;width:1070px}
.list-nav ul:before{content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; border-bottom: 1px dashed #d5d5d5;}
.list-nav ul:last-child{border-bottom: none; }
.list-nav ul:last-child:before{display: none;}
.list-nav h2 , .list-nav ul li,.list-nav ul{float: left;}
.list-nav li{ width: auto;}
.list-nav h2 {font-size: 1.6rem; width: 100px; line-height: 36px; color: #222; padding: 15px 0;text-align: left;}
.list-nav  li a{font-size: 1.4rem; display: block; line-height: 20px; color: #222; padding: 8px 15px;}
.list-nav li a:hover{background: #122a88; color: #fff;}
.list-pro-box{width:1030px;margin-left: 41px;}
.list-pro-main .main-title {font-size: 24px;color:#4d4d4d;height:50px;line-height: 50px;border-bottom: 1px solid rgba(28,28,28,.2);position: relative}
.list-pro-main .main-title:after {content:'';position: absolute;bottom:0;left:0;width:93px;height:2px;background: #162987}
.list-pro-main ul {margin-top: 31px;}
.list-pro-main li{float: left; margin-bottom: 30px; width: 274px; margin-right:50px;background: #ccc; padding: 15px; }
.list-pro-main li:nth-child(3n) {margin-right:0;}
.list-pro-main li .product-box {padding:10px;background-color: #fff;}
.list-pro-main li > a{display: block;}
/* .list-pro-main li img{-ms-transform: scale(1);transform: scale(1); transition: transform .3s ease;} */
/* .list-pro-main li a:hover img{-ms-transform: scale(1.15);transform: scale(1.15);} */
.list-pro-main li:hover a{color: #162987;}
.list-pro-main li h3 {font-size: 16px; font-weight: normal;height:50px;line-height: 50px;overflow: hidden;text-overflow: ellipsis;}
.list-pro-main li h3 a{color:#4d4d4d}
.list-pro-main li a.h4{color:#4d4d4d;display: inline-block;padding:0 5px;border: 1px solid #4d4d4d;text-align: left;font-size: 12px;height:23px;line-height: 23px;}
.list-pro .list-pro-sidebar{width:326px;}
.list-pro .list-pro-sidebar .list-nav-box{background: url(../images/product-bg.jpg);background-size:cover;padding:0 32px 30px;height:876px}
.list_nav_tit{height: 60px; line-height: 60px; text-align: left; color: #162987; font-size: 30px;font-weight: bold;padding-top:20px;}
.list_nav_tit_en{height: 40px; line-height: 40px; text-align: left; color: #162987; font-size: 18px;}
.list_nav_tit_en::before {
    content: "";
    display: block;
    border-top: 2px solid #162987;
    width: 100px;
    position: relative;
    top: 5px;
}
.list-nav-box .nav-item {line-height: 35px;margin-top: 10px;color:#162987;position:relative;font-size:18px;}
.list-nav-box a{display: block;padding-left: 20px;}
.list-nav-box .nav-item>a{color:#162987;border: 1px solid #162987;}
.list-nav-box .nav-item.on>a{ font-size:20px}
.list-nav-box .nav-item a:hover{ font-size:20px}
.list-nav-box .nav-toggle {position: absolute;top:0px;right:10px;font-size: 20px;}
.list-nav-box .nav-toggle::after {content:"+";}
.list-nav-box .nav-item.on .nav-toggle::after {content:"-";}
.list-nav-box .nav-item.on .sub-nav {display: block;}
.list-nav-box .sub-nav {padding: 5px 20px 10px;background:rgba(255,255,255,.4);display: none;}
.list-nav-box .sub-nav .sub-nav-item {line-height: 35px;border: 1px solid #fff;margin-top: 10px;background-color:#f7f7f7;}
.list-nav-box .sub-nav .sub-nav-item a{color:#787878;}
.list-nav-box .sub-nav .sub-nav-item.on a{ font-size:20px}
.phone{background: #dadada; margin-top:25px; padding: 10px 39px 39px;}
.phone .contact-title {font-size: 30px;font-weight: bold;text-align: center; color: #162987;height:50px;line-height: 50px;}
.phone .contact-box {padding:10px 10px; background-color: #fff;text-align: center;}
.phone .contact-fuwu {font-size: 25px;height: 30px;line-height: 30px;color: #4d4d4d;}
.phone .contact-number {font-size: 28px;height: 30px;line-height: 30px;color: #162987;font-weight: bold;}
.phone .contact-weixin {font-size: 25px;height: 30px;line-height: 30px;color: #4d4d4d;}
.phone .contact-qrcode {margin-top:10px;width:150px;height:150px;}
.phone i{ font-size: 22px;}
.findjoy{margin-left:-2%;}
.findjoy li{width:23%; margin-left:2%; float:left;margin-bottom: 30px;}
.findjoy h3 {margin-top: 10px; line-height: 1.5; font-size: 1.5rem; font-weight: normal;}


@media (max-width: 768px) {
    .list-pro {margin-top: 0;}
    .list-pro>.f-cb {display: flex;flex-direction: column;}
    .list-pro .list-pro-sidebar {width: 100%;order: 2;float:none;}
    .list-pro .list-pro-sidebar .list-nav-box {height: auto;}
    .list-pro-box {order:1;float:none;width: 100%;padding: 10rem;box-sizing: border-box;margin-left: 0;}
    .list-pro-main li, .list-pro-main li:nth-child(3n){float: left;width: 45%; padding:1%; margin-right: 2%;}
    .list-pro-main ul li img {width: 100%;}
}