#nav-box .titleItem{  float:left; font-size:0;height:2.4vw; margin-bottom:1.5vh; display: flex;align-items: center; }
#nav-box .titleItem img{display:inline-block;width:auto; height:2.4vw; padding:0; margin:0;vertical-align:top;}
#nav-box .titleItem h2{color: #fff;line-height:2.4vw; letter-spacing:.1vw; font-weight:500; padding:0 .6vw 0 1.2vw; height:2.4vw;display:inline-block;background:#d10412; }

.brandText{ padding:8vh 0 3vh 0; border-bottom:#e8e8e8 solid 1px; }
.brandText .showMassage{margin:2vh 0;}
.brandText .showMassage img{ width:100%; height:auto; border-radius:5px; overflow:hidden;}
.brandText h2{ display:none;text-align:left; margin:2vh 0;}
.brandText p{text-align:left; line-height:180%;margin:1vh 0; font-size:14px}
.brandText img{ width:100%; height:auto; border-radius:5px; overflow:hidden;}
.readBtn{  z-index:11;font-size:0.7vw; color:#686868; margin:20px 0;border:#bebebe solid 1px; line-height:200%; padding:0 1.5vw; border-radius:2px; display:inline-block;transition: all .3s; -webkit-transition: all .3s;  -moz-transition: all .3s;}
.readBtn i{ padding:0 0 0 .5vw;}
.readBtn:hover{color:#cf1a20;border:#cf1a20 solid 1px; box-shadow: 1px 1px 20px #cacaca;transition: all .3s; -webkit-transition: all .3s;  -moz-transition: all .3s;}

.proList{ padding:0 0 3vh 0; }

.proList ul li{display:flex;position:relative; overflow:hidden;}
.proList ul li:hover{ background:none;  box-shadow: 1px 1px 20px #cacaca;transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s;}

.proList ul li .bgImg{ position:absolute; width:100%; height:auto; z-index:-1; top:0; left:0;}

.proList ul li .bgImg img{ width:100%; height:auto;}

.proList ul li .pubContainer{padding:5vh 0;border-bottom:#e8e8e8 solid 1px;}
.proList ul li:first-child{ margin-top:3vh;}
.proList ul li:last-child{ margin-bottom:3vh;}

.proList ul li .proBox{width:45%; height:auto; float:left; padding:0 0%;transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s;}

.proList ul li .proBox img{ width:100%; height:auto;}

.proList ul li .txtBox {width:55%; height:100%; margin:auto; float:left;display: flex;align-items: center;}

.proList ul li .txtBox .textCon{ text-align:left; }

.proList ul li .txtBox  h2{font-weight:500; margin:3vh 0;}

.proList ul li .txtBox p{ line-height:180%; font-size:.85vw;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}
.proList ul li a h2,.proList ul li a p{ color:#2b2b2b;}
.proList ul li .txtBox .moreBtn{ width:7vw;  margin:3vh 0 0; min-width:100px;  text-align:center; display:inline;}

.proList ul li .txtBox .moreBtn{padding:.8vh 0; background:none; border:#cf1a20 solid 1px; color:#cf1a20;  border-radius:3px;display:block;transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s;}
.proList ul li .txtBox .moreBtn:hover,.proList ul li a:hover .txtBox .moreBtn{ color:#FFF;  background:#cf1a20;border:#cf1a20 solid 1px; display:block; box-shadow: 1px 1px 20px #cacaca;transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s;}
.proList ul li .txtBox .moreBtn i{ padding:0 0 0 .5vw;}

@media (min-width: 769px) and (max-width: 1320px){
	.brandText h2{display:none; font-size:24px;}
.brandText p{font-size:16px;}
.proList ul li .txtBox  h2{font-size:24px;}
.proList ul li .txtBox p{font-size:16px;}

}

@media (max-width: 768px) {
#nav-box .titleItem{ display:none;}

.brandText{ padding:60px 0 3vh 0; border-bottom:#e8e8e8 solid 1px; }
.brandText .showMassage{margin:20px 0;}
.brandText .showMassage img{ width:100%; height:auto; border-radius:3px; overflow:hidden;}
.brandText h2{ display:block;text-align:left; margin:10px 0;}
.brandText p{text-align:left; line-height:200%;margin:5px 0; font-size:14px}
.brandText img{ width:100%; height:auto; border-radius:3px; overflow:hidden;}

.readBtn{  z-index:11;font-size:14px; color:#686868; margin:20px 0;border:#bebebe solid 1px; line-height:200%; padding:0 20px; border-radius:2px; display:inline-block;transition: all .3s; -webkit-transition: all .3s;  -moz-transition: all .3s;}
.readBtn i{ padding:0 0 0 5px;}
.readBtn:hover{color:#cf1a20;border:#cf1a20 solid 1px; box-shadow: 1px 1px 20px #cacaca;transition: all .3s; -webkit-transition: all .3s;  -moz-transition: all .3s;}


.proList{ padding:20px 20px 20px ; }

.proList ul li{position:relative}
.proList ul li:hover{ background:none;  box-shadow: none; -webkit-transition: all .5s;  -moz-transition: all .5s;}

.proList ul li .bgImg{ display:none;}

.proList ul li .pubContainer{padding:20px 0;border-bottom:#e8e8e8 solid 1px;}
.proList ul li:first-child{ margin-top:0;}
.proList ul li:last-child{ margin-bottom:0;}

.proList ul li .proBox{width:100%; height:auto; float:none; padding:0 0;transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s;}

.proList ul li .proBox img{ width:80%; height:auto;}

.proList ul li .txtBox {width:100%; height:auto; margin:auto; float:none; display:block;align-items: center; padding:20px 0;}

.proList ul li .txtBox .textCon{ text-align:left; }

.proList ul li .txtBox  h2{font-weight:500; margin:10px 0;}

.proList ul li .txtBox p{ line-height:180%; font-size:14px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 50;overflow:auto;}
.proList ul li a h2,.proList ul li a p{ color:#2b2b2b;}
.proList ul li .txtBox .moreBtn{ width:150px;  margin:30px auto 0 auto;   text-align:center; display:inline-block;}

.proList ul li .txtBox .moreBtn{padding:8px 0; background:none; border:#cf1a20 solid 1px; color:#cf1a20;  border-radius:3px;display:block;transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s;}
.proList ul li .txtBox .moreBtn:hover,.proList ul li a:hover .txtBox .moreBtn{ color:#FFF;  background:#cf1a20;border:#cf1a20 solid 1px; display:block; box-shadow: 1px 1px 20px #cacaca;transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s;}
.proList ul li .txtBox .moreBtn i{ padding:0 0 0 .5vw;}
}