﻿html{background: #fefefe;}
.pageBox{display: flex;justify-content: space-between;margin-top: 40px;margin-bottom: 140px;}
.pageBox>.left{width: 217px;}
.pageBox>.left .slideNav{/*min-height: 245px;*/margin-bottom:125px}
.pageBox>.left .slideNav p{color: #333333;font-size: 18px;border-bottom: 1px solid #f3f3f3;padding-bottom: 7px;font-weight:  bold;}
.pageBox>.left .slideNav ul{padding: 10px 0 0}
.pageBox>.left .slideNav ul li{position:relative}
 .pageBox>.left .slideNav ul li:hover>a,.pageBox>.left .slideNav ul li.active>a{color:#144732;font-weight:bold} 
.pageBox>.left .slideNav ul li.slide span{cursor:pointer;display:block;position:absolute;width:15px;height:60px;background:url(../img/triangle.png) center center no-repeat;right: 0;top: 0;transform:rotate(-90deg)}
.pageBox>.left .slideNav ul li.slideA span{transform:rotate(0)}
.pageBox>.left .slideNav ul li>a{color: #777777;font-size: 18px;line-height: 60px;text-overflow: ellipsis;overflow:hidden;white-space:nowrap;}
.pageBox>.left .slideNav ul li dl{display:none}
.pageBox>.left .slideNav ul li dl dd{padding-left:23px;line-height:50px;}
.pageBox>.left .slideNav ul li dl dd a{color:#666;font-size:14px;text-overflow:hidden;overflow:hidden;white-space:nowrap;display:block;width:100%;height:100%}
.pageBox>.left .slideNav ul li dl dd.active,.pageBox>.left .slideNav ul li dl dd:hover{background: #fff;box-shadow: 0 0 15px rgba(0,0,0,0.04);border-left: 2px solid #000;}
.pageBox>.left .slideContact{text-align: center;padding: 0 8px;background: #fff;box-shadow: 0 0 15px 1px #f3f3f3;}
.pageBox>.left .slideContact p{font-size: 18px;color: #333333;line-height: 50px;border-bottom: 1px solid #f3f3f3;margin-bottom: 28px;}
.pageBox>.left .slideContact span{width: 37px;height: 37px;border-radius: 50%;display: inline-block;background: #144732;background-position: center center;background-repeat: no-repeat;}
.pageBox>.left .slideContact i{display: block;color: #101010;font-weight: bold;font-size: 22px;font-style: normal;padding-bottom: 15px;border-bottom: 1px solid #f3f3f3;}
.pageBox>.left .slideContact .address{font-size: 14px;color: #777;line-height: 26px;padding-top: 5px;padding-bottom: 20px;}
.pageBox>.right{width: 928px;}
.pageBox .location{/* display: flex; *//* justify-content: space-between; */position: relative;}
.pageBox .location:after{content: "";position: absolute;width: 830px;height: 2px;background: #f3f3f3;right: 0;bottom: 8px;}
.pageBox .location .title{color: #8c8c8c;}
.pageBox .location .title .en{text-transform: uppercase;font-size: 18px;}
.pageBox .location .title p{color: #a7a7a7;font-size: 14px;}
.pageBox .location .position{position:absolute;right:0;top:0}
.pageBox .location .position,.pageBox .location .position a{color: #666666;font-size: 14px;}
.about .pageCon{margin-top: 20px;}
.about .pageCon>img{width: 100%;}
.about .pageCon>p{margin: 50px 0 35px;text-align: center;font-size: 18px;color: #333333;}
.about .pageCon .info{color: #777777;font-size: 14px;line-height: 25px;}

.product .pageCon ul{display: flex;flex-wrap: wrap;margin-top: 20px;}
.product .pageCon ul li{width:215px;height: 250px;margin-right: 22px;margin-bottom: 46px;overflow:hidden}
.product .pageCon ul li .Img{width: 100%;height: 215px;overflow: hidden}
.product .pageCon ul li img{transition:all .4s ease-in-out}
.product .pageCon ul li p{text-align: center;font-size: 16px}
.product .pageCon ul li:nth-child(4n){margin-right: 0;}
.product .pageCon ul li:hover img{transform:scale(1.2)}
.product .pageCon ul li:hover p{font-weight: bold;color:#20412e }
.pages{margin-top: 45px;text-align: center;}
.pages a{color: #999;font-size: 14px;padding: 2px;min-width: 19px;display:  inline-block;margin: 0 3px;}
.pages a.currentpage{background: #20412e;color: #fff;border-radius: 50%;}
.pages a.prev span,.pages a.next span{display: inline-block;width: 15px;height: 16px;background: url(../img/arrow.png) left 80% no-repeat;/* vertical-align: middle; */}
.pages a.next span{background-position-x: right;}

.download .pageCon ul{display:flex;flex-wrap: wrap;margin-top: 20px;}
.download .pageCon ul li{width: 435px;padding-bottom: 34px;margin-bottom: 40px;border-bottom: 1px dashed #f2f2f2;background: url(../img/downloadBk.jpg) left top no-repeat;background-size: 190px;height: 254px;position: relative;display:  flex;margin-right: 58px;}
.download .pageCon ul li:nth-child(2n){margin-right:0;}
.download .pageCon ul li:hover .Text p{color: #1f9689}
.download .pageCon ul li .Img{width: 149px;height: 219px;position: absolute;top: 18px;left: 21px;overflow:  hidden;}
.download .pageCon ul li img{width: 100%;}
.download .pageCon ul li .Text{padding-left: 20px;width: 226px;position: absolute;top: 0;right: 0;padding-top: 10px;}
.download .pageCon ul li .Text p{font-size: 16px;color: #333;line-height: 60px;font-weight: bold;}
.download .pageCon ul li .Text .summary{line-height: 24px;font-size: 14px;color: #333;}
.download .pageCon ul li .Text a{width:96px;height: 30px;line-height: 30px;text-align: center;margin-top: 15px;display: inline-block;border-radius: 30px;border: 1px solid #20412e;font-size: 14px;color: #20412e;}
.download .pageCon ul li a:hover{background: #20412e;color: #fff;}

.news .pageCon ul{margin-top:20px;}
.news .pageCon ul li{padding: 30px 24px 20px 40px;}
.news .pageCon ul li:nth-child(2n+1){background: #f9f7f8;}
.news .pageCon ul li:hover .Img img{transform: scale(1.2)}
.news .pageCon ul li:hover .Text p{color: #1f9689}
.news .pageCon ul li a{display: flex;justify-content: space-between;}
.news .pageCon ul li .Img{width: 130px;height: 60px;overflow: hidden}
.news .pageCon ul li .Img img{width:100%;transition:all .3s ease-in-out}
.news .pageCon ul li .Text{width: 690px;}
.news .pageCon ul li .Text .title{display: flex;justify-content: space-between;margin-bottom: 5px;}
.news .pageCon ul li .Text p{font-size: 16px;color: #333;font-weight: bold;}
.news .pageCon ul li .Text .title{font-size: 14px;color: #666;}
.news .pageCon ul li .Text .summary{font-size: 14px;color: #777;line-height: 22px;}
.news .pages{margin-top: 73px;}

.contact .pageCon{margin-top: 20px;}
.contact .pageCon #maps{margin-bottom: 40px;height:253px}
.contact .pageCon .map{height:253px}
.contact .pageCon>p{margin-bottom: 35px;font-size: 18px;color: #333;text-align: center;font-weight: bold;}
.contact .pageCon ul{display: flex;flex-wrap: wrap;}
.contact .pageCon ul li{line-height: 22px;font-size: 14px;color: #777;width: 50%;margin-bottom: 20px;}
.contact .pageCon ul li p{width: 278px;padding-left: 46px;padding-bottom: 5px;}

.proInfo .pageCon .info{line-height: 35px}
@media screen and (max-width:1024px){
    .pageBox{flex-direction: column-reverse;width: 94%;margin-bottom: 10vw;margin-top: 6vw;}
    .pageBox>.left{width:100%;margin-top: 10vw;}
    .pageBox>.left .slideNav{display:none}
    .pageBox>.left .slideContact{padding-top:5vw}
    .pageBox>.left .slideContact p{display:none}
    .pageBox>.right{width:100%}
    .pages{margin-top: 3vw;margin-bottom: 10vw;}
    .pageBox .location{padding-bottom:5vw;border-bottom:1px solid #d4d0d0}
    .pageBox .location:after{width: calc(100% - 80px);display: none;}
    .pageBox .location .position{width: 60%;text-align: right;font-size:12px;color: #999;}
     .pageBox .location .position a{font-size:12px;color: #999;}
    .pageBox .location .title .en{font-size:14px}
    .pageBox .location .title p{font-size:18px;color: #20412e;font-weight:  bold;}
    .about .pageCon>p{margin: 10vw 0 5vw;}
    /*.product .pageCon ul li{width: 48%;margin-right: 4%;height: 52vw;margin-bottom: 8vw;}*/
    .product .pageCon ul li{width: 48%;margin-right: 4%;height: auto;margin-bottom: 8vw;}
    .product .pageCon ul li .Img{height: 48vw}
    .product .pageCon ul li:nth-child(2n){margin-right:0}
    .news .pageCon ul li{padding:4vw 3vw}
    .news .pageCon ul li .Img{width:30%}
    .news .pageCon ul li .Text{width:65%}
    .news .pageCon ul li .Text .summary{height: 44px;overflow:hidden;}
    .news .pages{margin-top:10vw}
    .contact .pageCon ul{display:block}
    .contact .pageCon ul li{width: 100%;box-sizing:border-box;}
    .contact .pageCon ul li p{width:100%;box-sizing:  border-box;padding-left: 10vw;}
    .contact .left{display:none}
    .proInfo .pageCon .info{line-height:25px}
    .download .pageCon ul li{width:100%;margin-right: 0;background-size: 42vw;height: 55vw;margin-bottom: 30px;}
    .download .pageCon ul li .Img{width: 34vw;height: 48.3vw;top: 4vw;left: 4vw;}
    .download .pageCon ul li .Text{width:45vw}
    .download .pageCon ul li .Text p{line-height: 20px;}
    .download .pageCon ul li .Text .summary{margin-top:2vw;height:  120px;overflow:  hidden;}

}


