@charset "utf-8";
/* CSS Document */

#banner{ width: 100%; height: 400px; float: left;}
#banner .img{ width: 100%; height: 100%; float: left;}
#banner .img img { width: 100%; max-width: initial; height: 100%; position: relative; top: 0; left: 50%; transform: translateX(-50%);}
#banner .text{ width: 100%; max-width: 1600px; height: auto; padding: 0 20px; margin: 0 auto; position: relative; bottom: 200px; color: #fff;}
#banner .text span{ width: 100%; height: auto; float: left; font-size: 36px;}
#banner .text p{ width: 100%; height: auto; float: left; font-size: 16px; margin-top: 10px;}
#banner .menu{  width: 100%; height: 60px; padding: 0 40px; margin: 0 auto; position: relative; margin-top: 340px; background: rgba(0,0,0,.25); color: #f05e38;}
#banner .menu dl{ width: auto; height: auto; float: right; right: 40px; position: absolute; line-height: 60px; color: #ffffff; letter-spacing: 2px; background: url(../images/icon23.png) no-repeat center left; background-size: 22px; font-size: 14px;}
#banner .menu dl dt{ width: auto; height: auto; float: left; text-indent: 30px; color: #ffffff;}
#banner .menu dl dd{ width: auto; height: auto; float: left;}
#banner .menu dl dd i{ width: auto; height: auto; float: left; padding: 0 10px;}
#banner .menu dl dd a{ color: #ffffff;}
#banner .menu dl dd span{ color: #ffffff;}
#banner .menu dl dd a:hover,#banner .menu dl dd a:active{ color: #ffffff;}
@media(max-width: 900px){
    #banner{ display: none;}
    #banner .menu{ display: none;}
    #banner .menu dl{ float: left; left: 20px; right: 0; letter-spacing: 1px; font-size: 12px;}
    #banner .menu dl dd i{ padding: 0 5px;}
}


#main{ width: 100%; height: auto; float: left; padding-bottom: 30px;}
#main .mainIn{ width: 100%; max-width: 1600px; height: auto; margin: 0 auto;}
@media(max-width: 1600px){
    #main .mainIn{ max-width: 1200px;}
}
@media(max-width: 1200px){
    #main .mainIn{ width: calc(100% - 40px); margin-left: 20px;}
}



#main .mainN1{ width: 270px; height: auto; float: left; margin-top: 30px;}
#main .mainN1 .pro_nav{ width: 100%; height:auto; float: left;}
#main .mainN1 .pro_nav .proMenuT{ width: 100%; height:auto; float: left; line-height: 50px; background: #252627; color: #FFFFFF; font-size: 20px; text-indent: 30px;}
#main .mainN1 .pro_nav .proMenuB{ width: 100%; height:auto; float: left;}
#main .mainN1 .pro_nav .proMenuB img{ width: 100%;}
#proMenu{ width: 100%; height:auto; float: left;}
#proMenu li a{ width:100%; height:44px; line-height:44px; display:block; background:url(../images/about_09.jpg) no-repeat left top; background-size: 100% 100%; padding-left:30px;  cursor:pointer;}
#proMenu li a span{ width: 100%; height:auto; float: left; background:url(../images/right-2.png) no-repeat left center; background-size: 15px; text-indent: 20px;}
#proMenu li .font{ color: #d90000;}
#proMenu li a span.cur{ color: #d90000;}
#proMenu li ul li a{ width:100%; height:auto; line-height:44px; display:block; background:none; padding-left:50px; border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2;border-left:1px solid #e2e2e2;}

#main .mainN1 .pro_navN2{ width: 100%; height:auto; float: left; margin-top: 20px;}
#main .mainN1 .pro_navN2 .proMenuT{ width: 100%; height:auto; float: left; line-height: 50px; background: #252627; color: #FFFFFF; font-size: 20px; text-indent: 30px;}
#main .mainN1 .pro_navN2 .proMenuB{ width: 100%; height:auto; float: left;}
#main .mainN1 .pro_navN2 .proMenuB img{ width: 100%;}
/*#main .mainN1 dl{ width: 100%; height: auto; float: left;}
#main .mainN1 dl dt{ width: auto; height: auto; float: left; margin-top: 10px;  margin-right: 20px;}
#main .mainN1 dl dt a{ width: 170px; height: auto; float: left; padding: 8px 15px; background: #edeaea; font-size: 14px; text-align: left;}
#main .mainN1 dl dt.cur a{ background: #21abd7; color: #ffffff;}
#main .mainN1 dl dt a:hover,#main .mainN1 dl dt a:active{ background: #21abd7; color: #ffffff;}
#main .mainN1 dl dd{ width: auto; height: auto; float: left; margin-right: 20px; margin-top: 10px;}
#main .mainN1 dl dd a{ width: auto; height: auto; float: left; background: #edeaea; border-radius: 50px; padding: 8px 15px; font-size: 14px;}
#main .mainN1 dl dd.cur a{ background: #21abd7; color: #ffffff;}*/


@media(max-width: 900px){
    #main .mainN1{ display: none;}
}
@media(max-width: 640px){
    #main .mainN1 dl dt{ margin-right: 10px;}
    #main .mainN1 dl dd{ margin-right: 10px;}
}


#main .mainN2{ width: calc(100% - 290px); height: auto; float: right; margin-top: 30px;}

#main .mainN2 .contact{ width: 100%; height: auto; float: left; background: #e6e6e6; padding:30px 0;}
#main .mainN2 .contactIn{ width: 100%; max-width: 1600px; height: auto; margin: 0 auto; overflow: hidden;}
#main .mainN2 .contactL{ width: 280px; height: auto; float: left; text-align: center; background: #303030; color: #ffffff; font-size: 30px; padding: 30px 0;}
#main .mainN2 .contactL span{ width: 100%; height: auto; float: left;}
#main .mainN2 .contactL p{ width: 100%; height: auto; float: left;font-size: 35px; margin-top: 15px; }
#main .mainN2 .contactR{ width: calc(100% - 300px); height: auto; float: right; text-align: center;}
#main .mainN2 .contactR h2{ width: 100%; height: auto; float: left; font-weight: normal; font-size: 42px; color: #d90000; text-transform: capitalize;}
#main .mainN2 .contactR h3{ width: 100%; height: auto; float: left; font-weight: normal; font-size: 34px; margin-top: 20px;}
#main .mainN2 .contactR h4{ width: 100%; height: auto; float: left; font-weight: normal; font-size: 23px; margin-top: 5px;}
#main .mainN2 .contactR h5{ width: 100%; height: auto; float: left; font-weight: normal; font-size: 20px; margin-top: 5px;}

@media(max-width: 700px){
    #main .mainN2 .contact{ padding-top: 0;}
    #main .mainN2 .contactL{ width: 100%;}
    #main .mainN2 .contactR{ width: 100%; margin-left: 0; margin-top: 20px;}
}

#main .mainN2T{ width: 100%; height: auto; float: left; margin-top: 30px;}
#main .mainN2T ul{ width: 100%; height: auto; margin: 0 auto;}
#main .mainN2T ul li{ width: calc((100% - 60px)/4); height: auto; float: left; margin-left: 20px; border: 1px solid #ebebeb; box-sizing: border-box; overflow: hidden; margin-bottom: 20px;}
#main .mainN2T ul li a{ width: 100%; height: auto; float: left;}
#main .mainN2T ul li:nth-child(4n+1){ margin-left: 0;}
#main .mainN2T ul li:hover { box-shadow:0 0 15px 1px rgba(0,0,0,.1);}
#main .mainN2T ul li .liT{ width: 100%; height: auto; float: left; /*position: relative; padding-bottom: calc((389/520)*100%);*/}
#main .mainN2T ul li .liT img{ width: 100%; height:auto; /*position:absolute;*/
    -moz-transition: all 0.5s linear;
    -o-transition:  all 0.5s linear;
    transition: all 0.5s linear;
}
#main .mainN2T ul li:hover .liT img {
    -webkit-transform:  scale(1.05) ;
    -moz-transform: scale(1.05) ;
    -ms-transform: scale(1.05);
    -o-transform:  scale(1.05) ;
    transform:  scale(1.05);
}
#main .mainN2T ul li .liM{ width: 90%; height: auto; float: left; margin-left: 5%; margin-top: 20px; border-bottom: 1px solid #ebebeb; padding-bottom: 20px;}
#main .mainN2T ul li .liM dl{ width: 100%; height: auto; float: left;}
#main .mainN2T ul li .liM dt{ width: calc(100%); height: 90px; float: left; font-size: 14px; color: #222222;}
#main .mainN2T ul li .liM dd{ width: calc(100%); height: auto; float: left; margin-top: 10px; white-space: nowrap; text-overflow: ellipsis; font-size: 16px;}
#main .mainN2T ul li .liM dd:nth-child(3){ width: calc(50%); margin-top: 5px; font-size: 12px;}
#main .mainN2T ul li .liM dd:nth-child(4){ width: calc(50%); margin-top: 5px; font-size: 12px; text-align: right;}
#main .mainN2T ul li .liM p{ width: 100%; height: auto; float: left; margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#main .mainN2T ul li .liB{ width: 90%; height: auto; float: left; line-height: 52px; margin-left: 5%; font-size: 14px; color: #666666; background: url("../images/icon20.png") no-repeat center right; text-transform: Uppercase;}
@media(max-width: 1000px){
    #main .mainN2T ul li{ width: calc((100% - 40px)/3);}
    #main .mainN2T ul li:nth-child(n){ margin-left: 20px;}
    #main .mainN2T ul li:nth-child(3n+1){ margin-left: 0;}
}
@media(max-width: 900px){
    #main .mainN2{ width: 100%; margin-top: 20px;}
    #main .mainN2T ul li{ width: calc((100% - 40px)/3);}
    #main .mainN2T ul li:nth-child(n){ margin-left: 20px;}
    #main .mainN2T ul li:nth-child(3n+1){ margin-left: 0;}
}
@media(max-width: 640px){
    #main .mainN2T ul li{ width: calc((100% - 20px)/2);}
    #main .mainN2T ul li:nth-child(n){ margin-left: 20px;}
    #main .mainN2T ul li:nth-child(2n+1){ margin-left: 0;}
}
@media(max-width: 460px){
    #main .mainN2T ul li{ width: 100%;}
    #main .mainN2T ul li:nth-child(n){ margin-left: 0;}
}
/*#main .mainN2LT li{ width: 100%; height: auto; float: left; margin-top: 35px; border-bottom: 1px solid #f2f2f2; padding-bottom: 30px;}
#main .mainN2LT li h2{ width: 100%; height: auto; float: left; line-height: 30px; font-size: 22px; font-weight: normal; background: url("../images/code.png") no-repeat left top; background-size: 30px; text-indent: 40px;}
#main .mainN2LT li p{ width: 100%; height: auto; float: left; font-size: 14px; line-height: 25px; margin-top: 10px;}
#main .mainN2LT li em{ width: 100%; height: auto; float: left; line-height: 25px; font-style: normal; font-size: 14px; margin-top: 10px;}
#main .mainN2LT li a:hover,#main .mainN2LT li a:active{ color: #1e50ae;}*/
#main .mainN2B{ width: 100%; height: auto; float: left;}
/*#main .mainN3{ width: 100%; height: auto; float: left; margin-top: 30px; font-size:12px; text-align:center;}*/
#main .mainN2B ul.pages{ width: 100%; height: auto; float: left; text-align: center; margin-top: 20px; padding-top: 20px;}
#main .mainN2B ul.pages li{ width: auto; height: auto; display: inline-block}
#main .mainN2B ul.pages li a{ background-color:#F4F4F4; border:1px solid #EEEEEE; border-radius:2px; font-size:14px; margin-left:4px; padding:4px 10px; cursor:hand;}
#main .mainN2B ul.pages li a:hover,#main .mainN2B ul.pages li a:active{ background-color:#FF0000; border-color:#FF0000; color:#FFFFFF; text-decoration:none;}
#main .mainN2B ul.pages li a.current{ background-color:#FFFFFF; border-color:#FFFFFF; color:#333333; font-weight:bold; padding:4px 5px;}

#main .mainN2R{ width: calc(20%); height: auto; float: right; margin-top: 40px;}
#main .mainN2R dl{ width: 100%; height: auto; padding-left: 20px; float: right; border-left: 1px solid #f1f1f1; padding-bottom: 50px;}
#main .mainN2R dt{ width: 100%; height: auto; float: left; font-size: 18px; color: #999999;}
#main .mainN2R dd{ width: 100%; height: auto; float: left; border-bottom: 1px dashed #ccc; padding-bottom: 25px; margin-top: 20px;}
#main .mainN2R dd h2{ width: 100%; height: auto; float: left; font-size: 16px; line-height: 50px; color: #222;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all ease .5s;
}
#main .mainN2R dd p{ width: 100%; height: auto; float: left; font-size: 14px; line-height: 24px; color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#main .mainN2R dd span{ width: 100%; height: auto; float: left; margin-top: 10px; font-size: 14px; line-height: 24px; color: #999;}

@media(max-width: 1600px){
    #main .mainN2In{ max-width: 1200px;}
}
@media(max-width: 1200px){
    #main .mainN2In{ width: calc(100% - 40px); margin-left: 20px;}
}



#main .mainN4{ width: 100%; height: auto; float: left; background: #ffffff; padding-bottom: 30px; margin-top: 30px;}
#main .mainN4In{ width: 100%; max-width: 1600px; height: auto; margin: 0 auto; padding: 20px 20px 0; overflow: hidden;}
#main .mainN4T{ width: 100%; height: auto; float: left;}
#main .mainN4T p{ margin-top: 0;}
#main .mainN4 ul{ width:100%; height: auto; float: left; margin-top: 30px;}
#main .mainN4 ul li{ width: 23.875%; height: auto; float: left; margin-left: 1.5%; margin-top: 30px;}
#main .mainN4 ul li:nth-child(4n+1){ margin-left: 0;}
#main .mainN4 ul li span{ width:90%; height: 60px; float: left; margin-left: 5%; margin-top: 20px; font-size: 16px; line-height: 30px; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#main .mainN4 ul li p{ width:90%; height: auto; float: left; margin-left: 5%; font-size: 12px; line-height: 24px; color: #999; margin-top: 18px;}
#main .mainN4 ul li a{ width:100%; height: 150px; float: left; border: 1px solid #d8d8d8;}
#main .mainN4 ul li:hover a{ border:1px solid #21abd7;}

@media(max-width: 1200px){
    #main .mainN4In{ width: calc(100% - 40px); margin-left: 20px;}
}
@media(max-width: 900px){
    #main .mainN4 ul li{ width: 49.25%;}
    #main .mainN4 ul li:nth-child(n){ margin-left: 1.5%;}
    #main .mainN4 ul li:nth-child(2n+1){ margin-left: 0;}
}
@media(max-width: 640px){
    #main .mainN4{ margin-top: 50px;}
    #main .mainN4 ul li{ width: 100%;}
    #main .mainN4 ul li:nth-child(n){ margin-left: 0;}
}