/*about*/
.about{background-color:#fff;}
.about .container{padding: 0}
.about .sub-banner .container{padding:0 25px}
.about-text{position: relative;padding: 25px;}
.about-text .info{width: 100%;}
.about-text .info p{font-size: 1.4rem;line-height:2.6rem;margin-bottom:20px;color: #495057;text-align:justify; text-justify:inter-ideograph;}
.about-ul-text .img{width: 100%;text-align:center}
.about-text .img img{max-width:100%;margin-bottom:20px;}
.about-text .about-ul{width: 100%;flex-wrap: wrap}
.about-text .about-ul li{width:49.5%;background-color: #f1f3f5;padding:10px 10px 20px 10px;margin-bottom: 1%;margin-right: 1%;text-align: center;position: relative;}
.about-text .about-ul li:nth-child(2n){margin-right: 0}
.about-text .about-ul li b{font-size:1.4rem;font-weight: 550;color:#495057;display: block; }
.about-text .about-ul li span{display: none}
.about-text .about-ul li i{font-size: 4rem;color:#fdd000;display: block;margin-bottom:5px; }
.about-banner{background-color: #fdd000;padding:50px 20px;position: relative;text-align: center;background-image: url("https://www.xs-magnetics.com/images/about-bg1.jpg");background-size: cover;background-position: center;}
.about-banner h4{font-size: 2.2rem;margin-bottom:30px;color: #fff;font-weight: 500;position: relative;}
.about-banner h4:after{content: '';width: 30px;height:1px;margin-left: -15px;top: -20px;background-color:#fdd000;position: absolute;left: 50%;}
.about-banner h4 span{margin-left: 10px;color:#fdd000}
.about-banner p{font-size: 1.4rem;letter-spacing:3px;font-weight: 400;margin-bottom: 30px;color:rgba(255,255,255,1);}
.about-banner img{max-width:100%;width: auto}

.about-sb{padding: 25px;background-color: #f1f3f5}
.about-sb .swiper-container{width: 100%;padding:0 0 25px 0}
.about-sb .swiper-wrapper{width: 100%;}
.about-sb .swiper-slide {width:320px;transition-timing-function:linear;margin: 20px 0}
.about-sb .swiper-slide img{width:100%;border-radius: 6px;}
.about-sb .swiper-button-next, .swiper-button-prev{
    width:40px;
    height:50px;
    background-size:43px 56px;
    margin-top:-20px;
    outline:none;
    font-size: 0;
    color: transparent;
}
.about-sb .swiper-button-next{background-image: url(../images/next.svg)}
.about-sb .swiper-button-prev{background-image: url(../images/prev.svg)}
.about-sb .swiper-pagination-bullet{
    background:none;
    opacity:1;
    margin:0 6px !important;
    width:9px;
    height:9px;
    position:relative;
    outline:none;
    vertical-align:middle;}
.about-sb .swiper-pagination-bullet span{
    width:3px;
    height:3px;
    background:#CCC;
    display:block;
    border-radius:50%;
    margin-top:3px;
    margin-left:3px;
}
.about-sb .swiper-pagination-bullet i{
    background:#cc1d1c;
    height:1px;
    width:20px;
    position:absolute;
    top:4px;
    transform:scaleX(0);
    transform-origin:left;
    z-index:3;
    transition-timing-function:linear;
}
.about-sb .swiper-pagination-bullet-active span,.about-sb .swiper-pagination-bullet:hover span{
    width:9px;
    height:9px;
    margin-top:0;
    margin-left:0;
    background:#cc1d1c;
    position:relative;
    z-index:1;
}
.about-sb .swiper-pagination-bullet-active i{ animation:middle 6s;}
.about-sb .swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i{animation:first 6s;}
.about-sb .swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i{animation:last 6s;}
@keyframes first{
    0% {transform:scaleX(0.5);left:0px;}/*091*/
    100% {transform:scaleX(1);left:2px;} /*0915*/
}
@keyframes last{
    0% {transform:scaleX(0.7);left:-10px;}/*1090*/
    20% {transform:scaleX(0.3);left:2px;} /*090*/
    100% {transform:scaleX(0.3);left:0px;} /*090*/
}
@keyframes middle{
    0% {transform:scaleX(0.7);left:-10px;}/*1091*/
    20% {transform:scaleX(0.45);left:2px;}/*092*/
    100% {transform:scaleX(1);left:2px;} /*0913*/
}
.pro{width: 100%;padding:25px 25px 60px 25px;}
/*pro-ul*/
.pro-ul{flex-wrap: wrap;width: 100%;padding:10px 0;}
.pro-ul li{
    background-color: #fff;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-bottom:5%;
}
.pro-ul li:nth-child(2n){margin-right: 0;}
.pro-ul li a{align-items: center;display: block;background-repeat: no-repeat;background-size: cover;padding:20px;}
.pro-ul li a .info{padding:10px;position: relative;z-index: 3;}
.pro-ul li a .info h6{font-size:1.8rem;font-weight:550;color: #495057;margin-bottom: 5px;}
.pro-ul li a .info p{font-size: 1.6rem;margin-bottom:20px;color: #495057;font-weight:500;}
.pro-ul li a .info span{
    display: block;
    border-radius: 25px;
    text-align: center;
    text-transform: uppercase;
    width: 110px;font-weight:500;
    height: 35px;
    line-height:33px;
    font-size: 1.3rem;
    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 5px 10px rgba(253,117,4,0.25);
    -webkit-box-shadow:0 5px 10px rgba(253,117,4,0.25);
    -moz-box-shadow:0 5px 10px rgba(253,117,4,0.25);
    color: #fff;
}


.history{padding:25px}
.history-ul{position: relative;flex-wrap: wrap;width: 100%;padding-bottom: 50px;}
@keyframes zg
{
    0% {height: 0;}
    25% {height: 25%;}
    50% {height: 50%;}
    100% {height: 100%;}
}
.history-ul:after{
    content: '';height: 0;background-color: #fdd000;position: absolute;z-index: 1;width: 2px;margin-left: 0;left: 0;
    animation: zg 2s ease 0.1s forwards;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.history-ul li{width:100%;margin-right: 0;text-align: left;padding:10px 0 10px 20px;position: relative;}
.history-ul li:after{
    content: '';border-radius: 50%;background-color:#fff;
    position: absolute;z-index: 3;
    width: 12px;height: 12px;border: 3px solid #fdd000;right:unset;top:20px;left: -5px;
}
.history-ul li:nth-child(2n){padding:10px 0 10px 20px;margin-right: 0;text-align: left;}
.history-ul li:nth-child(2n):after{right: unset;left: -5px;top:20px;}
.history-ul li span{font-size: 2rem;color: #495057;letter-spacing: -1px;font-weight: 550}
.history-ul li p{color:#868e96;font-size: 1.4rem;line-height: 2.2rem;font-weight: 400 }



.honors{background: #fff;padding: 25px;margin-bottom: 50px;}
.honors h2{font-size:2rem;padding: 0 0 0 20px;font-weight: 600;position: relative;text-transform: uppercase;}
.honors h2:after{content: '';width: 12px;height: 12px;border:3px solid #0e6aac;margin-top: -6px;left: 0;border-radius: 50%;position: absolute;top:50%;}
.honors ul{padding:10px 0;}
.honors ul li{width:100%;margin-bottom: 2%;}
.honors ul li img{width: 100%;border: 1px solid #ddd;padding:8px;}
.zzzs-ul{padding:20px 0;}
.zzzs-ul li{padding:10px 0;}
.zzzs-ul li img{width: 100%;border: 1px solid #ddd;padding: 5px;}
.zzzs-ul li p{font-size: 1.8rem;line-height:2.5rem;padding:5px 0;text-align: center;text-transform: uppercase;color: #868e96}

.about-img{flex-wrap: wrap;}
.about-img .img{width: 100%;order: 2;margin-bottom:50px;}
.about-img .img img{width: auto;max-width: 100%;}
.about-img .info{width: 100%;order: 1;padding:10px 20px;}
.about-img .info dl{width: 100%;padding:15px 0;border-bottom: 1px dashed #eee;border-bottom: 1px dashed #ced4da;}
.about-img .info dl:last-child{border-bottom: none;}
.about-img .info dt{font-size:1.6rem;font-weight: 600;margin-bottom: 10px;color: #212529;position: relative;}
.about-img .info dd{font-size: 1.4rem;line-height:2rem;color: #868e96;padding: 2px 0;}
.about-img .info dd a{color: #868e96;}
.about-img .info dd a:hover{color: #212529;}
@media (max-width: 375px) {
    .about-img .info dd{font-size:1.3rem;line-height:1.6rem;}
}

/*contact*/
.contact{}
.contact-info{background-color: #fff;padding: 25px;margin-bottom:60px;}
.contact-info .form{width: 100%;}
.contact-info .form label{display: block;width:100%;margin-bottom:0;}
.contact-info .form label input{line-height:50px;height:50px;width:100%;margin-bottom: 10px;font-size: 1.5rem;border: 1px solid #aaa;font-weight: 400;text-indent: 20px;background-color:rgba(0,0,0,0);color:#212529;}
.contact-info .form label input:last-child{margin-right: 0;}
.contact-info .form label textarea{
    height:120px;font-size: 1.5rem;margin-bottom: 10px;border: 1px solid #aaa;padding: 20px;
    font-weight: 400;width: 100%;background-color: transparent;outline: none;color:#212529;}
.contact-info .form label button{
    border: none;text-transform: uppercase;
    color: #fbf4dc;
    font-weight: 500;outline: none;border-radius: 6px;
    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);
    width: 100%;height: 50px;line-height:50px;font-size:1.8rem;
    box-shadow:2px 5px 10px rgba(253,117,4,0.2);
    -webkit-box-shadow:2px 5px 10px rgba(253,117,4,0.2);
    -moz-box-shadow:2px 5px 10px rgba(253,117,4,0.2);
}
.contact-info .form label button i{font-size:2rem;}

/*job*/
.job{background-color:#fff}
.job-info{max-width: 750px;margin: 0 auto;width: 100%;padding:25px;}
.job-info .img{width: 100%;margin-bottom: 50px;position: relative;top:-20px;left: -10px;padding: 0!important;}
.job-info .img img{width:80%;display: block;margin: 0 auto!important;padding: 0!important;}
.job-info .info{width: 100%;}
.job-info .info h4{font-size: 2rem;padding-left:20px;padding-bottom:10px;color: #0e6aac;font-weight: 550;border-bottom: 1px solid #ddd;position: relative;}
.job-info .info h4:after{content: '';width: 12px;height:12px;border:3px solid #fdd000;top:4px;border-radius: 50%;position: absolute;left: 0;}
.job-info .info .txt{padding:15px 0;}
.job-info .info .txt h5{font-size:1.6rem;color: #495057;margin-bottom: 10px;font-weight: 600;}
.job-info .info .txt p{font-size: 1.4rem;line-height: 2.2rem;color:#495057;margin-bottom:20px;}
.tabs{margin-bottom: 50px;}
.job-info .tabs-container{width:100%;}
.job-info .tabs-container .tab-content{padding: 10px;}
.job-info .tab-content h6{font-size: 1.8rem;padding: 0 0 0 20px;font-weight:600;color:#495057;position: relative;}
.job-info .tab-content h6:after{
    content: '';
    position: absolute;left: 0;border-radius: 50%;
    top:4px;width: 12px;height:12px;border:2px solid #fdd000;
}
.job-info .tab-content ul{padding:20px 0;}
.job-info .tab-content ul li{line-height:2.2rem;font-size: 1.4rem;color: #868e96;}
.job-info .tab-content a{
    display: block;
    border-radius: 30px;
    color: #fbf4dc;
    text-align: center;
    position: relative;
    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);
    margin:0 auto 20px auto;width:120px;line-height:41px;height: 45px;
    font-size: 1.6rem;font-weight: 500;
    box-shadow:1px 5px 10px rgba(253,117,4,0.25);
    -webkit-box-shadow:1px 5px 10px rgba(253,117,4,0.25);
    -moz-box-shadow:1px 5px 10px rgba(253,117,4,0.25);
}
.job-info .tab-content a i{display: none;}
.tabs-list li.active a { background-color:#0e6aac; color:#fff;}


/*culture*/
.culture{background-color:#fff;}
.culture .container{padding: 0;}
.culture-info{background-position: bottom center;background-size:auto 100%;background-repeat: no-repeat;margin-bottom:80px;}
.culture-info .img{width:100%;}
.culture-info .img img{width:auto;max-width: 85%;}
.vision{flex-wrap: wrap;width:100%;padding:25px;}
.vision li{border-bottom: 1px solid #eaeaea;padding-bottom:10px;margin-bottom:10%;width: 100%}
.vision li:last-child{border-bottom: none;}
.vision li i{font-size: 4rem;color: #fdd000;display: block;position: absolute;left: 25px;top:50%;margin-top: -25px;width: 50px;height: 50px;line-height: 50px;text-align: center;}
.vision li h4{font-size: 1.8rem;margin-bottom: 10px;font-weight:550;color: #495057;}
.vision li h4{font-size: 1.8rem;padding-left:20px;margin-bottom: 10px;color: #0e6aac;font-weight: 550;position: relative;}
.vision li h4:after{content: '';width: 12px;height:12px;border: 3px solid #fdd000;top:4px;border-radius: 50%;position: absolute;left: 0;}
.vision li p{font-size: 1.4rem;line-height: 2rem;color: #868e96;font-weight: 400;}
.cul-jzg{width: 100%;flex-wrap: wrap;padding: 30px 25px 50px 25px;}
.cul-jzg li{width:100%;padding:0;margin-bottom:10%;}
.cul-jzg li h4{font-size: 2rem;padding-left:20px;padding-bottom:10px;margin-bottom: 10px;color: #0e6aac;font-weight: 550;border-bottom: 1px solid #ddd;position: relative;}
.cul-jzg li h4:after{content: '';width: 12px;height:12px;border: 3px solid #fdd000;top:4px;border-radius: 50%;position: absolute;left: 0;}
.cul-jzg li p{font-size: 1.4rem;line-height: 2.5rem;color:#495057;font-weight: 400;}

.brand{align-items: center;flex-wrap: wrap;padding:25px;}
.brand .img{width:60%;margin:25px auto;}
.brand .img img{border: solid 6px #fdd000;border-radius: 50%;}
.brand .info{color: #495057;width:100%}
.brand .info h4{font-weight: 550;font-size: 1.8rem;margin-bottom: 10px;}
.brand .info p{font-weight: 500;font-size: 1.4rem;line-height:2.5rem;margin-bottom: 10px;}
.brand .info b{font-weight: 550;font-size: 1.6rem;}

.cul-cont{align-items: center;}
.cul-cont .left-img{width: 100%;text-align: center;margin-bottom: 50px;}
.culture-ul{width: 100%;flex-wrap: wrap}
.culture-ul li{width:100%;margin-right:0;align-items: center;background-color: #f8f9fa;padding:50px;border-bottom-left-radius:50px;border-top-right-radius:50px;}
.culture-ul li:last-child{margin-right: 0}
.culture-ul li .img{width: 25%;}
.culture-ul li .img img{width:100%;border-bottom-left-radius:20px;border-top-right-radius:20px;}
.culture-ul li .info{width:70%;margin-left: 5%}
.culture-ul li h4{font-size:30px;font-weight: 600;color: #495057;margin-bottom:25px;position:relative;text-align: right}
.culture-ul li h4 span{margin-right: 10px;color: #adb5bd;font-size: 32px;}
.culture-ul li h4:after{content: '';width: 40px;height: 1px;background-color:#adb5bd;position: absolute;right: 0;top:-15px;}
.culture-ul li p{color: #868e96;font-size: 20px;line-height: 40px;text-align: right}
.culture-ul li:nth-child(2n){background-color: #fff}
.culture-ul li .img{order: 2;}
.culture-ul li .info{order: 1;margin-left: 0;margin-right: 5%}
.culture-ul li h4{text-align: left}
.culture-ul li h4:after{left: 0;right:unset;}
.culture-ul li p{text-align: left}
.cul-cont .left-img{padding:10px 30px 50px 30px;background-color:#f1f3f5;border-radius:50px;align-items: center;border-bottom-left-radius: 0;border-top-right-radius: 0}
.cul-cont .left-img h2{font-size:100px;padding-top: 20px;text-transform: uppercase;font-weight: 600;position: relative;width:20%;border-right: 1px solid #ddd;}
.cul-cont .left-img h2:after{content: '';width: 50px;height:4px;background-color: #0e6aac;position: absolute;bottom: -10px;left: 50%;margin-left: -25px;}
.cul-left-ul{width:80%;padding-left:2%}
.cul-left-ul li{width:16.66%;text-align:center;}
.cul-left-ul li a{display: block;}
.cul-left-ul li span{display: block;width:40px;height:40px;line-height:40px;font-size: 18px;border-radius: 50%;text-align: center;background-color: #fff;color:#0e6aac;position: relative;bottom: -40px;right: -40px;}
.cul-left-ul li i{display: block;margin: 10px auto;text-align: center;width:100px;height:100px;line-height:100px;border-radius: 50%;background-color: #0e6aac;color: #fff;font-size:4.5rem;font-weight: 300;}
.cul-left-ul li b{display: block;font-size: 22px;font-weight:600;color: #495057}
.cul-cont .left-img{padding:30px 10px;border-radius:0;flex-wrap: wrap;margin-bottom:0;background-color: #f8f9fa;}
.cul-cont .left-img h2{font-size:3rem!important;padding-top:0;width:100%;border-right:none;}
.cul-cont .left-img h2:after{width: 50px;height:2px;bottom: -10px;margin-left: -25px;}
.cul-left-ul{width:100%;padding-left:0;flex-wrap: wrap;padding-top: 30px;}
.cul-left-ul li{width:49%;text-align:center;margin-bottom: 2%;margin-right: 2%;background-color: #fff;padding: 10px 0;}
.cul-left-ul li:nth-child(2n){margin-right: 0;}
.cul-left-ul li span{width:20px;height:20px;line-height:20px;font-size: 1.4rem;;bottom: -25px;right: -20px;background-color: #e9ecef;display: none;}
.cul-left-ul li i{margin: 10px auto;width:50px;height:50px;line-height:50px;font-size:2.2rem;}
.cul-left-ul li b{font-size: 1.6rem;}
.culture-ul li{padding:30px 20px;border-bottom-left-radius:20px;border-top-right-radius:20px;flex-wrap: wrap}
.culture-ul li .img{width:100%;text-align: center;padding: 0;}
.culture-ul li .img img{width:100%;border-bottom-left-radius:15px;border-top-right-radius:15px;}
.culture-ul li .info{width:100%;margin-left: 0;margin-bottom: 20px;}
.culture-ul li h4{font-size:2.2rem;margin-bottom:15px;}
.culture-ul li h4 span{margin-right:5px;font-size:2.2rem;}
.culture-ul li h4:after{width:25px;top:-10px;}
.culture-ul li p{font-size:1.6rem;line-height:2.5rem;text-align:left}
.culture-ul li .img{order: 2;}
.culture-ul li .info{order: 1;margin-left: 0;margin-right: 0}
.culture-ul li h4{text-align: left}
.culture-ul li h4:after{left: 0;right:unset;}
.culture-ul li p{text-align: left}