﻿.pro{padding: 0 0 65px 0}
.pro-ul{flex-wrap: wrap;width: 100%;padding: 30px 0 30px 0}
.pro-ul li{width: 100%;margin-bottom:20px;overflow: hidden;}
.pro-ul li:last-child{margin-bottom: 0}
.pro-ul li a{display: block;position: relative;padding:30px 20px;background-color: #fff;background-position: right bottom;background-repeat: no-repeat;background-size: cover;width: 100%;height: 200px;}
.pro-ul li a:after{content: '';width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);z-index: 1;position: absolute;left: 0;top:0;}
.pro-ul li a img{width: 100%;height: 100%;}
.pro-ul li a .info{padding:20px;position: absolute;left: 0;bottom: 0;;z-index:2;}
.pro-ul li a .info h6{font-size:2.2rem;font-weight:550;color: #fff;margin-bottom:5px;}
.pro-ul li a .info p{font-size: 1.5rem;margin-bottom:20px;color:#fff;}
.pro-ul li a .info span{
    background-image:-webkit-gradient(linear,0% 100%,0% 100%, from(#fdd000), to(#e7670d));
    background-image:-webkit-linear-gradient(top, #fdd000, #e7670d);
    background-image:-o-linear-gradient(top, #fdd000, #e7670d);
    background-image:linear-gradient(top, #fdd000, #e7670d);
    box-shadow:0 10px 20px rgba(253,117,4,0.3);
    -webkit-box-shadow:0 10px 20px rgba(253,117,4,0.3);
    -moz-box-shadow:0 10px 20px rgba(253,117,4,0.3);
    -webkit-animation: fadeOutInUp 1s both;
    animation: fadeOutInUp 1s both;
    color: #fff;border: none;
    display: block;width: 120px;height: 40px;
    line-height: 38px;border-radius: 30px;
    text-align: center;font-size:1.3rem;font-weight:500;
    text-transform: uppercase;
   }

.pro-info{width: 100%;}
.pro-info h2{font-size: 2.2rem;padding: 0 0 0 20px;font-weight: 600;color:#0e6aac;margin-bottom:20px;position:relative;}
.pro-info h2:after{content: '';width:12px;height:12px;border:3px solid #0e6aac;top:6px;border-radius: 50%;position: absolute;left: 0;}

/*cpxn*/
.cpxn{padding:25px 20px;}
/*table*/
#demoTable{width: 100%;margin-bottom: 20px;}
#demoTable td,#demoTable th{padding:2px;}
#demoTable th{background: #f8f8f8;font-size: 1.2rem;text-align: center;}
#demoTable td{background:#fff;font-size: 1.2rem;text-align: center;}
#demoTable tr:last-child{background-color: #ddd!important;}
table{border-collapse: collapse;border-spacing: 0;width: 100%;}
#demoTable td:first-child{position: relative;}
#demoTable td:first-child:after{content: '';position: absolute;left:0;top:0;height: 100%;width:3px;background-color: #3fb560;}
#demoTable .c1 td:first-child:after{content: '';position: absolute;left:0;top:0;height: 100%;width:3px;background-color: #f5a526;}
#demoTable .c2 td:first-child:after{content: '';position: absolute;left:0;top:0;height: 100%;width:3px;background-color: #1399da;}
.fakeContainer {margin:0;border: none;overflow: hidden;}
.my_width{overflow:hidden;padding:0;}
.first_div{display:block;margin:0 auto;}
.t-fixed{position: absolute;z-index: 999;background-color: #fff;top:50px;}


/*pro-beizhu*/
.pro-beizhu{padding:10px 20px;}
.pro-beizhu p{font-size:1.5rem;line-height:2.5rem;color:#495057;font-weight: 400;margin-bottom: 10px;}
.pro-beizhu div{width: 100%;padding-left:15px;margin:5px 0;font-size:1.2rem;position: relative}
.pro-beizhu div:after{content: '';position: absolute;width:8px;height: 8px;left:0;top:4px;border-radius: 50%;}
.pro-beizhu .pro-c1:after{background-color:#3fb560; }
.pro-beizhu .pro-c2:after{background-color:#f5a526; }
.pro-beizhu .pro-c3:after{background-color:#1399da; }

/*bmdc*/
.bmdc{padding: 25px;}
.bmdc h6{font-size: 1.6rem;border-top:none;padding:10px 20px;margin:0 0 10px 0;color:#495057;font-weight:600;border-top: 1px solid #eee;border-bottom: 1px dashed #ddd;position: relative;}
.bmdc h6:after{content: '';width: 12px;height: 12px;border-radius: 50%;border: 2px solid #f5a526;margin-top:-4px;position: absolute;left: 0;top:50%;}
.bmdc p{font-size:1.5rem;line-height:2.5rem;color:#495057;font-weight: 400;}
.bmdc b{font-weight:500;color:#495057;display: block;padding-top: 10px;font-size: 1.4rem;}
.bmdc i{font-size: 1.8rem;margin-right:5px;color: #f5a526;}
.bmdc .xnb-pdf{margin: 30px auto;}

/*table*/
.pro-table{width: 100%;overflow-x:auto;margin:20px 0;}
table{border-collapse: collapse;border-spacing: 0;width: 100%}
table td,table th{padding:5px;}
table th{background:#0e6aac!important;font-size: 1.2rem;text-align: center;color: #fff;border: 1px solid #fff;}
table td{background:#fff;font-size: 1.2rem;text-align: center;border: 1px solid #868e96;}
table tr:nth-child(2n) td{background-color:#e9ecef!important;}
.bmdc table th{text-overflow:ellipsis;white-space: nowrap;}
.bmdc table td,.bmdc table th{padding:2px 5px;text-overflow:ellipsis;white-space: nowrap;}

/*gylc*/
.gylc{padding:25px;margin:20px 0 0 0;background-color:#e9ecef}
.gylc .lclist{position: relative;margin-bottom: 20px;}
.gylc .lclist li{width:100%;margin-bottom:3%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content:flex-start;
    justify-content: flex-start;background-color: #fff;align-items: center;position: relative;border-radius:12px;
}
.gylc .lclist li b{position: absolute;top:50%;margin-top: -25px;right:20px;width:36px;height:36px;line-height:36px;font-size: 1.8rem;border-radius: 50%;background-color:#f5a526;color: #fff;text-align: center; }
.gylc .lclist li img{width:40%;padding:5px 20px}
.gylc .lclist li span{width:60%;font-size: 1.6rem;font-weight: 500;}
.gylc .cclist{background-color: #fff;padding:10px;border-radius:12px;text-align: center;}
.gylc .cclist img{display: block;width: 100%;padding: 10px 0;}

/*xn*/
.xn{margin:0;padding:30px 20px;background-position: center top;background-color: #0e6aac;position: relative;overflow: hidden; background-image: url(https://www.xs-magnetics.com/images/xn-bg.jpg?v=2020);background-size: cover;}
.xn::before{
    content: '';
    position: absolute;
    z-index: 2;
    top:0;left:0;
    filter: blur(50px);
}
.xn::after{
    width: 100%;height: 100%;
    position: absolute;z-index: 1;
    top:0;left:0;
    background: hska(0,0%,100%,.3);
}
.xn h2{margin-bottom:0;padding:0;position: relative;font-weight: 600;text-align: center;color: #fff;border-bottom: none;}
.xn h2:after{display: none}
.xnb-pdf{width: 70%;font-size: 1.6rem;line-height: 40px;font-weight: 600;color: #495057;margin:30px auto 0 auto;display: block;border:2px solid #0e6aac;text-align: center;border-radius: 30px;}
.xnb-pdf i{ font-size: 2.2rem;color:#0e6aac;margin-left: 10px;font-weight: 400; }
.xn .xn-ul{width: 90%;flex-wrap: wrap;padding:30px 0 0 0;margin: 0 auto;align-items: center;}
.xn .xn-ul li{width:48.75%;border-radius: 8px;min-height:70px;margin-right: 2.5%;margin-bottom: 2.5%;padding:10px 10px;border: 1px solid rgba(255,255,255,0.5);text-align: center;}
.xn .xn-ul li:nth-child(2n){margin-right: 0}
.xn .xn-ul li b{font-size: 1.5rem;padding-top: 0;font-weight:500;color:#fdd000;display: block;margin-bottom: 5px;}
.xn .xn-ul li p{font-size: 1.2rem;line-height:1.6rem;color:#fff;}
.xn .xn-ul li:last-child{width:100%;}

/*lamination*/
.lamination{align-items: center;padding: 25px;flex-wrap: wrap}
.lamination .img{width: 100%;order: 2;}
.lamination .img img{width: auto;max-width: 100%;}
.lamination .text{width: 100%;order: 1;}
.lamination .text h5{font-size: 1.6rem;margin-bottom: 10px;padding-bottom:10px;line-height:2.5rem;font-weight:550;border-bottom: 1px dashed #ddd;}
.lamination .text p{font-size:1.5rem;line-height:2.5rem;color:#495057;font-weight: 400;}
.lamination .text p i{font-size:2rem;color: #e7670d;}
.lamination .text .lamination-ul{padding:30px 0;flex-wrap: wrap}
.lamination .text .lamination-ul li{position: relative;width:100%;margin-bottom:10px;padding:10px 10px 10px 70px;background-color: #f1f3f5}
.lamination .text .lamination-ul li:nth-child(3){margin-right: 0;}
.lamination .text .lamination-ul li:nth-child(4){width:100%;}
.lamination .text .lamination-ul li:nth-child(5){width:100%;}
.lamination .text .lamination-ul li h6{font-size: 1.8rem;line-height: 3rem;font-weight:550;color:#495057;}
.lamination .text .lamination-ul li p{font-size:1.5rem;line-height:2.5rem;color:#495057;font-weight: 400;}
.lamination .text .lamination-ul li i{font-size:3.5rem;left:15px;top:10px;color: #e7670d;position: absolute;}

/*component*/
.component{flex-wrap: wrap;padding:25px;}
.component .img{width: 100%}
.component .img img{width: auto;max-width: 100%;}
.component .text{width: 100%;}
.component .text h6{font-size: 2rem;margin-bottom: 10px;padding-bottom:10px;font-weight:600;border-bottom: 1px dashed #ddd;color: #0e6aac}
.component .text p{font-size:1.5rem;line-height:2.5rem;color:#495057;font-weight: 400;}
.component .text p b{display: block;font-weight: 500;color:#495057;padding:20px 0 0 0;font-size: 1.8rem;}
.component .text p i{font-size: 3rem;color: #e7670d;margin-right: 5px;position: relative;top:2px;}
.component .text ul{padding: 20px 0;width: 100%;}
.component .text ul li{width: 49%;margin-right: 2%;padding:10px;display:table-cell;vertical-align:middle;text-align: center;font-weight: 500;background-color: #0e6aac;font-size:1.5rem;line-height:2.5rem;color: #fff;border-radius:8px;}
.component .text ul li:last-child{margin-right: 0;background-color: #fdd000;color:#212529;}
.component-ul{flex-wrap: wrap;padding:5% 0 0 0;border-top: 1px dashed #ddd;}
.component-ul li{width: 32%;margin-right: 2%;padding: 20px;
    border: 1px solid #e9ecef;
    box-shadow: 5px 6px 1px rgba(0,0,0,0.03);
    -webkit-box-shadow:5px 6px 1px rgba(0,0,0,0.03);
    -moz-box-shadow:5px 6px 1px rgba(0,0,0,0.03);
}
.component-ul li:last-child{margin-right:0 }
.component-ul li img{width: 100%;}

/*dz*/
.dz{flex-wrap: wrap;padding:25px;}
.dz .img{width: 100%;}
.dz .img img{width: auto;max-width: 100%;}
.dz .text{width: 100%;}
.dz .text h6{font-size: 2rem;font-weight:600;margin-bottom:10px;padding-bottom:10px;border-bottom: 1px dashed #ddd;color: #0e6aac}
.dz .text p{font-size:1.5rem;line-height:2.5rem;color:#495057;font-weight: 400;margin-bottom: 10px;}

/*faq*/
.faq{flex-wrap: wrap;}
.faq li{width: 100%;padding:25px;background-color:#f1f3f5}
.faq li:nth-child(2n){background-color: #fff;}
.faq .faq-title{line-height:2.5rem;font-size:1.6rem;margin-bottom:10px;display: block;font-weight: 550;color: #0e6aac;position: relative;padding-left:15px;}
.faq .faq-title:after{
    content: '';border-radius: 50%;
    position: absolute;z-index: 3;
    width: 12px;height: 12px;border: 3px solid #fdd000;right:unset;top:6px;left: -5px;
}
.faq .faq-text{color: #868e96;padding-left:15px;}
.faq .faq-text p{color: #868e96;}
.faq .faq-text table{border-left: 1px solid #dee2e6;margin: 20px 0;}
.faq .faq-text table td,.faq .faq-text table th{text-align: center;border-right:1px solid #dee2e6;border-bottom: 1px solid #dee2e6;}
.faq .faq-text table td{color: #495057;font-size: 1.2rem;padding:5px;}
.faq .faq-text table th{background-color:#0e6aac;color: #fff;font-weight: 400;font-size:1.2rem;line-height:1.8rem;padding:5px;}
.faq .faq-text,.faq .faq-text p{font-size:1.5rem;line-height:2.5rem;color:#495057;font-weight: 400;}

.app-ul{padding:25px;flex-wrap: wrap}
.app-ul li{width:100%;margin-right:0;margin-bottom:3%;position: relative;overflow: hidden;}
.app-ul li:last-child{margin-bottom: 0}
.app-ul li img{width: 100%;}
.app-ul li .info{position: absolute;width: 100%;height: 100%;left: 0;bottom: 0;padding:30px;}
.app-ul li .info h6{color: #fdd000;font-size:2.2rem;margin-bottom:20px;font-weight: 550;}
.app-ul li .info p{color:#fff;font-size: 1.5rem;line-height:2.5rem;font-weight: 400;}


/*zzrz*/
.zzrz{padding:25px;}
.zzrz p{font-size: 1.4rem;line-height: 2.5rem;color: #868e96;margin-bottom:20px;}
.zzrz-img-ul{flex-wrap: wrap;}
.zzrz-img-ul li{width: 49%;margin-right: 2%;margin-bottom: 2%;border: 3px solid #ddd;padding: 10px;}
.zzrz-img-ul li:nth-child(2n){margin-right:0;}
.zzrz-img-ul li img{width: 100%;}

/*zzbz*/
.zzbz,.pkgl{padding: 25px;}
.zzbz p,.pkgl p{font-size: 1.4rem;line-height: 2.5rem;color: #868e96;margin-bottom:20px;}
.pkgl{position: relative;padding: 0;margin-bottom: 20px;}
.pkgl .img{text-align: center;}
.pkgl .img img{max-width: 100%;width: auto;}
.pkgl .info{width:100%;}
.pkgl .info p{font-size: 1.4rem;line-height:2.2rem;color: #495057;font-weight: 450}
.zzbz-img-ul{flex-wrap: wrap;margin-bottom: 10px;}
.zzbz-img-ul li{width:49%;margin-right: 2%;margin-bottom: 2%;border: 1px solid #eee;}
.zzbz-img-ul li:nth-child(2n){margin-right: 0;}
.zzbz-img-ul li img{width: 100%;}

/*zzbz-img*/
.zzbz-img{padding: 25px;flex-wrap: wrap;}
.zzbz-img li{margin:30px 10px;background-color: #fff;}
.zzbz-img li a{width: 100%;display: block;}
.zzbz-img li a .img{width: 100%;overflow: hidden;position: relative;background-color: #000}
.zzbz-img li a .img:after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    top:-100%;
    z-index: 1;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.zzbz-img  li a i{font-size: 2rem;width:30px;height:30px;line-height:30px;margin-left: -15px;color:#fdd000;text-align: center;position: absolute;left: 50%;top:50%;margin-top: -200px;z-index: 2}
.zzbz-img  li a img{width: 100%;}
.zzbz-img  li a span{display: block;padding:10px 0 0 0;font-size: 1.4rem;font-weight: 400;color: #495057;text-align: center}
.zzbz-img li a:hover{}
.zzbz-img li a:hover:after{top:0;}
.zzbz-img li a:hover i{margin-top: -25px;}
.zzbz-img li a:hover img{transform: scale(1.2);-webkit-transform: scale(1.2);filter:alpha(Opacity=50);-moz-opacity:0.5;opacity:0.5; }

/*tcqx*/
.tcqx{width: 100%;padding:25px}
.tcqx .tcqx-ul{flex-wrap: wrap;}
.tcqx .tcqx-ul li{margin-right: 2%;margin-top: 2%;border: 1px solid #ddd;width:49%;padding: 5px;}
.tcqx .tcqx-ul li:nth-child(2n){margin-right: 0;}
.tcqx .tcqx-ul li a{width: 100%;display: block;}
.tcqx .tcqx-ul li a .img{width: 100%;overflow: hidden;position: relative;background-color: #000}
.tcqx .tcqx-ul li a .img:after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    top:-100%;
    z-index: 1;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.tcqx .tcqx-ul li a i{font-size: 2.2rem;width: 30px;height:30px;line-height: 30px;margin-left: -15px;color:#fdd000;text-align: center;position: absolute;left: 50%;top:50%;margin-top: -200px;z-index: 2}
.tcqx .tcqx-ul li a img{width: 100%;}
.tcqx .tcqx-ul li a span{display: block;padding:10px 0 0 0;font-size: 1.4rem;font-weight: 400;color: #495057;text-align: center;}
