@charset "utf-8";
/* CSS Document */
body{margin:0; padding:0;font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; }
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0; }
ul,li,ol{list-style:none;}
a{text-decoration:none; color:#333;cursor: pointer;}

input,textarea,select,button{font-family:Arial, Helvetica, sans-serif;}
input:focus,textarea:focus,select:focus,button:focus{ outline:none;}
::-moz-selection {background:#aaa;color:#FFF;}
::selection {background: #aaa;color: #FFF;}
img{border:0}
.clear {zoom: 1;clear:both; }
.clear:after {content: ''; display: block; clear: both; }
input,textarea,select{font-family:Arial, Helvetica, sans-serif; }
input:focus,textarea:focus,select:focus{ outline:none;}



.indexBanner{width: 100%;position: relative;height:621px;background: #000;overflow: hidden;}
.indexBanner .bd{margin: 0 auto;position: relative;z-index: 0;overflow: hidden;}
.indexBanner .bd ul{width: 100% !important;}
.indexBanner .bd li{width: 100% !important;height:621px;overflow: hidden; background-size: cover !important;}
.indexBanner .bd li .cont{width: 100%;padding: 11% 3% 0;box-sizing: border-box; text-align:center}
.indexBanner .bd li .cont .tit{color: #FFFFFF;font-size:55px; padding-top:0px; font-weight:900;}
.indexBanner .bd li .cont .title{color: #FFFFFF;font-size: 35px;margin-top: 1%;}
.indexBanner .bd li .cont .title span{font-weight: bold;}
.indexBanner .bd li .cont .sum { margin-top: 1%; font-size:22px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; text-transform:uppercase; letter-spacing:1.2px;}
.indexBanner .bd li .cont .sum a{ display: inline-block;  color: #fff; font-size: 16px; letter-spacing: 1px; padding: 0 16px; line-height: 40px; border-radius: 25px; border: solid 1px #fff; margin-right: 20px;}
.indexBanner .bd li .cont .sum a:hover{ background-color: #fff; color: #45af38;}
.indexBanner .hd{width: 87%;min-width: 1150px;position: absolute;z-index: 4;bottom: 4%;left:50%;transform: translateX(-50%);display: table;font-size: 0;text-align: left;}
.indexBanner .hd ul::after{content: '';width: 2px;height: 210px;background-color: #ffffff;opacity: 0.3;filter:alpha(opacity=30);position: absolute;bottom: 40px;right: 12px;}
.indexBanner .hd ul li{cursor: pointer;display: inline-block;*display: inline;zoom: 1; overflow: hidden;}
.indexBanner .hd ul li p{width: 5px;height: 20px;margin: 0 6px;position:relative;}
.indexBanner .hd ul li p::after{content: '';width: 5px;height: 12px;border-radius: 6px;background-color: #fff;opacity:0.7;filter:alpha(opacity=70);position: absolute;bottom: 0;left: 0;transition: all 0.6s ease;}
.indexBanner .hd ul li.on p::after{filter:alpha(opacity=100);opacity:1;height: 20px;}
.indexBanner .hd ul li::after{content: '';width: 2px;height: 2px;background-color: #FFFFFF;position: absolute;top: -221px;right: 12px;opacity: 0;filter:alpha(opacity=0);}
.indexBanner .hd ul li.on::after{filter:alpha(opacity=100);opacity:1;animation: solid 8s linear infinite;}
.indexBanner .hd .mouse{color: #FFFFFF;font-size: 26px;float: right;}
@keyframes solid{0%{height: 2px;} 100%{height: 212px;}}
@-webkit-keyframes solid{0%{height: 2px;} 100%{height: 212px;}}
.indexBanner .icon-jiantou1{display:block;width:50px;height:50px;line-height:50px;font-size: 30px;color: #45af38;text-align: center;background-color: rgba(255,255,255,0.4);position:absolute; top:50%; margin-top:-25px;filter:alpha(opacity=20);opacity:0.2;transition: all 0.6s ease;}
.indexBanner .prev{left: -50px;transform: rotate(-180deg);}
.indexBanner .next{right: -50px;}
.indexBanner .prev:hover,.indexBanner .next:hover{ background-color: #45af38;color: #FFFFFF; }
.indexBanner:hover .prev{left: 100px;filter:alpha(opacity=100);opacity:1;}
.indexBanner:hover .next{right: 100px;filter:alpha(opacity=100);opacity:1;}











.met-index-product{  width:100%; float:left; padding-bottom:80px}

.met-index-product-category{width:1250px; margin:0 auto;}
.met-index-product-category li .met-index-product-catename{ transition:.5s}
.met-index-product-category li .met-index-product-catenamemark{ transition:.5s}
.met-index-product-category li:hover .met-index-product-catename{ padding-left:0px}
.met-index-product-category li:hover .met-index-product-catenamemark{ padding-left:0px}
.met-index-product-category li:hover a .view{ color:#fff; background:#08498d; border:1px solid #08498d; transition:.5s; width:100px}
.met-index-product-category li:hover a .view span{ left:-50px}
.met-index-product-category li:hover a .view-middle{ color:#fff; background:#0375c4; border:1px solid #0375c4; transition:.5s}
.met-index-product-category li:hover a .white-line{ display:none}
.met-index-product-category li:hover a .desc{ left:80px}
.met-index-product-category li:hover a .cover-bg{ left:0; bottom:0}
.met-index-product .container{ position:relative}
.met-index-product .container .more-btn{ position:absolute; right:0; top:0px; color:#B6B6B7; padding:8px 25px; transition:.5s; border-radius:3px}.met-index-product .container .more-btn:hover{ background:#0375c4; color:#fff; border-color:#759FE4}
.met-index-product-category li{ list-style-type:none; width:50%; height:350px; float:left; overflow:hidden}
.met-index-product-category li a{ position:relative; display:block; padding:0px}
.met-index-product-category li a p{ position:absolute; color:#ffffff}
.met-index-product-category li a p.met-index-product-cateno{ top:60px; left:50px; font-size:54px; font-weight:bold;}
.met-index-product-category li a p.met-index-product-catenamemark{ top:100px; left:50px; font-size:12px}
.met-index-product-category li a p.met-index-product-catename{ top:90px; left:80px; font-size:26px; line-height:24px; text-align:left}
.met-index-product-category li a .cover-bg{position:absolute; width:calc(100% - 0px); height:calc(100% - 0px); background:#0375c4; opacity:0.9; transition:1.5s; left:-100%; bottom:-100%}
.met-index-product-category li a .white-line{ position:absolute; width:50px; height:2px; background:#ffffff; top:140px; left:80px; transition:.5s}
.met-index-product-category li a .desc{ width:calc(100% - 190px); position:absolute; top:150px; left:-100%; color:#fff; padding-right:50px; transition:1.5s; font-size:16px; line-height:24px;}

.met-index-product-category li a .view{ position:absolute; color:#0375c4; left:40px; bottom:40px; border:1px solid #ffffff; background:#fff; padding:8px 5px; font-size:14px; font-weight:bold; overflow:hidden; width:60px;  text-align:right}
.met-index-product-category li a .view span{ width:80px; position:absolute; left:-44px; transition:.5s}
.met-index-product-category li a .view-middle{ position:absolute; color:#0375c4; background:#ffffff; left:40px; bottom:60px; border:1px solid #ffffff; padding:15px 20px; font-size:18px; font-weight:bold}
.met-index-product-category li a img{ width:100%; height:550px}
.met-head{ position:fixed; z-index:16; width:100%; border-bottom:1px solid #efefef}
.slide-line{ position:absolute; height:1px; width:60%; background:#fff; bottom:60px; left:20%; display:none}
.slide-line-item{ width:20%; height:3px; float:left; margin-top:-1px}
.slide-line-item.show{ background:#ffffff}
.index-product-bgimg{ margin-top:310px}
.met-index-product ul.nav-pills{display:flex;justify-content:center;margin-top:15px;margin-bottom:15px}
.met-index-product .index-product-list li{padding:15px;margin-bottom:0px}
.met-index-product .nav-pills .nav-link{border-radius:20px; height:39px;line-height:18px;margin:0 10px;border:1px solid #afafaf}
.met-index-product .nav-pills .nav-link:hover{background-color:#0375c4;color:#fff;border-color:#0375c4}
.met-index-product .nav-pills .nav-item.open .nav-link,.met-index-product .nav-pills .nav-item.open .nav-link:focus,.met-index-product .nav-pills .nav-item.open .nav-link:hover,.met-index-product .nav-pills .nav-link.active,.met-index-product .nav-pills .nav-link.active:focus,.met-index-product .nav-pills .nav-link.active:hover{background-color:#0375c4;border-color:#0375c4}
.met-index-pic .container{ position:absolute; padding-top:80px}



@media all and (max-width:768px){






.met-index-product{  width:100%; float:left; padding-bottom:50px}

.met-index-product-category{width:90%; margin:0 auto;}
.met-index-product-category li .met-index-product-catename{ transition:.5s}
.met-index-product-category li .met-index-product-catenamemark{ transition:.5s}
.met-index-product-category li:hover .met-index-product-catename{ padding-left:0px}
.met-index-product-category li:hover .met-index-product-catenamemark{ padding-left:0px}
.met-index-product-category li:hover a .view{ color:#fff; background:#08498d; border:1px solid #08498d; transition:.5s; width:100px}
.met-index-product-category li:hover a .view span{ left:-50px}
.met-index-product-category li:hover a .view-middle{ color:#fff; background:#0375c4; border:1px solid #0375c4; transition:.5s}
.met-index-product-category li:hover a .white-line{ display:none}
.met-index-product-category li:hover a .desc{ left:30px}
.met-index-product-category li:hover a .cover-bg{ left:0; bottom:0}
.met-index-product .container{ position:relative}
.met-index-product .container .more-btn{ position:absolute; right:0; top:0px; color:#B6B6B7; padding:8px 25px; transition:.5s; border-radius:3px}.met-index-product .container .more-btn:hover{ background:#0375c4; color:#fff; border-color:#759FE4}
.met-index-product-category li{ list-style-type:none; width:100%; height:180px; float:left; overflow:hidden}
.met-index-product-category li a{ position:relative; display:block; padding:0px}
.met-index-product-category li a p{ position:absolute; color:#ffffff}
.met-index-product-category li a p.met-index-product-cateno{ top:20px; left:50px; font-size:54px; font-weight:bold;}
.met-index-product-category li a p.met-index-product-catenamemark{ top:100px; left:50px; font-size:12px}
.met-index-product-category li a p.met-index-product-catename{ top:20px; left:30px; font-size:15px; line-height:24px; text-align:left}
.met-index-product-category li a .cover-bg{position:absolute; width:calc(100% - 0px); height:calc(100% - 0px); background:#0375c4; opacity:0.9; transition:1.5s; left:-100%; bottom:-100%}
.met-index-product-category li a .white-line{ position:absolute; width:50px; height:2px; background:#ffffff; top:50px; left:30px; transition:.5s}
.met-index-product-category li a .desc{ width:calc(100% - 80px); position:absolute; top:50px; left:-100%; color:#fff; padding-right:0px;transition:1.5s; font-size:14px; line-height:18px;}

.met-index-product-category li a .view{ position:absolute; color:#0375c4; left:40px; bottom:40px; border:1px solid #ffffff; background:#fff; padding:8px 5px; font-size:14px; font-weight:bold; overflow:hidden; width:60px;  text-align:right}
.met-index-product-category li a .view span{ width:80px; position:absolute; left:-44px; transition:.5s}
.met-index-product-category li a .view-middle{ position:absolute; color:#0375c4; background:#ffffff; left:40px; bottom:60px; border:1px solid #ffffff; padding:15px 20px; font-size:18px; font-weight:bold}
.met-index-product-category li a img{ width:100%; height:220px}
.met-head{ position:fixed; z-index:16; width:100%; border-bottom:1px solid #efefef}
.slide-line{ position:absolute; height:1px; width:60%; background:#fff; bottom:60px; left:20%; display:none}
.slide-line-item{ width:20%; height:3px; float:left; margin-top:-1px}
.slide-line-item.show{ background:#ffffff}
.index-product-bgimg{ margin-top:310px}
.met-index-product ul.nav-pills{display:flex;justify-content:center;margin-top:15px;margin-bottom:15px}
.met-index-product .index-product-list li{padding:15px;margin-bottom:0px}
.met-index-product .nav-pills .nav-link{border-radius:20px; height:39px;line-height:18px;margin:0 10px;border:1px solid #afafaf}
.met-index-product .nav-pills .nav-link:hover{background-color:#0375c4;color:#fff;border-color:#0375c4}
.met-index-product .nav-pills .nav-item.open .nav-link,.met-index-product .nav-pills .nav-item.open .nav-link:focus,.met-index-product .nav-pills .nav-item.open .nav-link:hover,.met-index-product .nav-pills .nav-link.active,.met-index-product .nav-pills .nav-link.active:focus,.met-index-product .nav-pills .nav-link.active:hover{background-color:#0375c4;border-color:#0375c4}
.met-index-pic .container{ position:absolute; padding-top:80px}



}