@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
font-size: 16px;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body
{
height: auto;
background: #f9f9f9;
scroll-behavior: smooth;
}
.show_pc{
display: block;
}
.show_ph{
display: none;
}
.videos_none{
display: none;
}
a{
text-decoration: none;
color: #333;
}
a:hover{
color: #004ea2;
}
ul,li{
list-style: none;
}
/*头部*/
.nav{position: fixed;top: 0;right: 0;width: 100%;height: 88px;background: #fff;z-index: 1000;display: flex;justify-content: flex-start;align-items: center;}
.nav .navLogo{display: flex;height: 46px;padding: 0 100px;}
.nav .navLogo img{height: 100%;}
.nav .navText{display: flex;justify-content: flex-start; }
.nav .navText h2{font-weight: 400;font-size: 1.3em;margin: 0.5em 40px 0 0;}
.show_pc{display: block;}
.show_ph{display: none;}
/*banner*/
.bg{position: relative;width: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;}
.banner_bg{width: 100%;height: 100%;margin:80px auto 0;}
.banner_bg img{width: 100%;height: 100%;display: block;}
/*背景描述*/
.contentAll{position: relative;margin: 0 auto;max-width: 1920px;}
.Itdn{position: relative; width: 94%;margin: 40px auto;}
.Itdn div p{position: relative; color: #333;font-size: 16px;text-indent: 2em;text-align: justify;font-weight: 400;line-height: 2;background: #f9f9f9;}
.Itdn div::before{content: '';position: absolute;left: -10px;transform: translateX(-50%);bottom: -7px;width: 26px;height: 26px;background: none;border-bottom: 2px solid #004ea2;border-left: 2px solid #004ea2;z-index: 100; }
.Itdn div::after{content: '';position: absolute;right:-30px;transform: translateX(-50%);top: -10px;width: 26px;height: 26px;background: none;border-top: 2px solid #004ea2;border-right: 2px solid #004ea2;z-index: 100; }
.Itdn_ph{position: absolute;bottom: 0;left: 0;width: 100%;color: #bbb;margin-bottom:40px;}
.Itdn_ph p{position: relative;text-indent: 2em;text-align: justify;line-height: 1.5;padding: 2px 30px;font-size: 13px;}
.Itdn_ph p strong{font-size: 12px;}
.Itdn_ph div::before{content: '';position: absolute;left: 30px;transform: translateX(-50%);bottom: -10px;width: 26px;height: 26px;background: none;border-bottom: 2px solid #1de0f1;border-left: 2px solid #1de0f1;z-index: 100; }
.Itdn_ph div::after{content: '';position: absolute;right: 0px;transform: translateX(-50%);top: -10px;width: 26px;height: 26px;background: none;border-top: 2px solid #1de0f1;border-right: 2px solid #1de0f1;z-index: 100; }
/*卡片内容*/
.fourth{padding: 100px 100px 100px 130px;position: relative;width: 100%;background:#fff;height: 100%;overflow-x: hidden;}
.intelH2{color: #004ea2;font-size: 32px;line-height: 1.2;font-weight: 600;text-align: center;}
.card_all{width: 100%;position: relative;display: flex;justify-content: space-around;flex-wrap: wrap;align-content: space-around;}
.card{position: relative;height: 220px;background: #f2fbff;display: flex;width: 28%;border-radius: 15px;margin-top: 80px;}
.card .imgBx{position: absolute;height: 120px;width: 120px;left: -60px;top: calc(50% - 60px);background: rgba(255,255,255,0.1);z-index: 1;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 15px;
border: 2px solid rgba(255,255,255,0.5);box-shadow: 5px 5px 30px rgba(0,0,0,0.1);transition: 0.5s ease-in-out;}
.card .imgBx img{max-width: 60px;/* filter: invert(1);*/transition: 0.5s ease-in-out;}
.card:hover .imgBx img{max-width: 80px;}
.card .content{text-align: left;position: absolute;right: 0;width: calc(100% - 60px);height: 100%;padding: 20px;display: flex;align-items: center;}
.card .content h2{color: #004ea2;margin-bottom: 5px;font-size: 24px;}
.card .content p{color: #333;font-size: 16px;}
/*产品展示*/
.productsOne{position: relative;width: 100%;min-height: 85vh;padding: 100px;display: flex;justify-content: center;align-items: center;overflow-x: hidden;}
.productsBg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #f2fbff;transition: 1s;}
.productsBg::before{content: '';position: absolute;top: 0; right: 0;width: 25%;height: 100%;background: rgba(0,0,0,0.1);}
.productsH2{position: relative;width: 94%;height: 20%;transition: 1s;z-index: 100;text-align: center;margin:80px auto 40px;}
.productsH2 h2{color: #004ea2;font-size: 32px;line-height: 1.5;font-weight: 600;}
.productsH2 p{color: #666;font-size: 16px;line-height: 1.5;font-weight: 200;}
.productsContent{position: relative;width: 100%;display: flex;justify-content: space-around;align-items: center;}
.productsContent .textBox{position: relative;max-width: 700px;margin-top: -100px;}
.productsContent .textBox li:nth-child(n + 2){display:none;}
.productsContent .textBox h2{color: #004ea2;font-size: 28px;line-height: 1.2;font-weight: 600;}
.productsContent .textBox p{color: #333;margin-top: 20px;text-align: justify;line-height: 1.8;}
.productsContent .textBox a{margin-top: 20px;position: relative;padding: 15px 50px;background: #004ea2;;border:none;display: inline-block;text-decoration: none;color: #fff;
text-transform: uppercase;letter-spacing: 2px;overflow: hidden;transition: 0.5s;z-index: 2; cursor: pointer; font-size: 18px;}
.productsContent .textBox a span{position: absolute;display: block;width: 0px;height: 0px;transform: translate(-50%,-50%);border-radius: 50%;background: #f10e0b;transition: width 0.5s, height 0.5s;z-index: -1;}
.productsContent .textBox a:hover span{width: 300px;height: 300px;}
.productsContent .imgBox{position: relative;z-index: 1;width: 600px;display: flex;justify-content: flex-end;margin-top: -100px;}
.productsContent .imgBox img{max-width: 550px;}
.thumb{position: absolute;left: 50%;bottom: 90px;transform: translateX(-50%);display: flex;}
.thumb li{list-style: none;display: inline-block;margin: 0 10px;cursor: pointer;transition: 0.5s;height: 90px;background: rgba(0,0,0,0.1);padding: 10px;border: 2px solid rgba(255,255,255,0.25);}
.thumb li p{text-align: center;line-height: 3;font-size: 18px;color:#333;font-weight: 500;}
.thumb li.active{border: 2px solid rgba(255,255,255,1);}
.thumb li::before{position: absolute;top: -180px;transform: translateX(-50%);left:130px;content: attr(data-text);white-space: nowrap;font-size: 100px;color: rgba(0,0,0,0.05);opacity: 0;font-weight: 700;pointer-events: none;}
.thumb li.active::before{opacity: 1;}
.thumb li img{max-width: 130px;visibility: center;}
/* top */
.backTop{position: fixed;top: 50%;width: 62px;height: 50px;right: 0;z-index: 102;background: rgb(0,0,0,0.7);}
.backTop a{width: 62px;height: 50px;display: flex;justify-content: center;align-items: center;}
@media(max-width: 1600px){
.Itdn div p{font-size: 14px;}
.Itdn div p strong{font-size: 14px;}
.fourth{padding: 100px 50px 100px 90px;}
.card .imgBx{height: 100px;width: 100px;left: -50px;top: calc(50% - 50px);}
.card .imgBx img{max-width: 50px;}
.card:hover .imgBx img{max-width: 70px;}
.card .content{width: calc(100% - 50px);}
}
@media (max-width: 1400px) {
.fourth{padding: 80px 0;}
.intelH2{font-size: 28px;}
.card{height: 200px;width: 40%;margin-left: 50px;margin-top: 60px;}
.card .content h2{font-size: 20px;}
.productsContent .textBox{max-width: 500px;}
.productsContent .textBox h2{font-size: 26px;}
.productsContent .textBox p{margin-top: 12px;font-size: 14px;line-height: 1.5;}
.productsContent .textBox a{padding: 10px 40px; font-size: 16px;}
.productsContent .imgBox img{max-width: 450px;}
.thumb li{height: 75px;}
.thumb li p{font-size: 16px}
.thumb li::before{left:200px;font-size: 80px;}
.thumb li img{max-width: 100px;}
}
@media (max-width: 1100px){
.show_pc{display: none;}
.show_ph{display: block;}
.nav{height: 80px;}
.nav .navLogo{display: flex;height: 40px;padding:0;padding-left: 20px;}
.nav .navLogo img{height: 100%;}
.nav .navText{display: flex;justify-content: flex-start;align-items: center;}
.nav .navText h2{font-weight: 400;font-size: 16px;margin: 5px 0 0;padding-left: 10px;}
/*卡片内容*/
.fourth{padding: 40px 0;}
.intelH2{font-size: 20px;padding:0 10px;line-height: 1.5;}
.card_all{width: 100%;}
.card{width: 80%;height: 140px;margin-top: 30px;}
.card .imgBx{height: 80px;width: 80px;left: -40px;top: calc(50% - 40px);border-radius: 10px; border: 2px solid rgba(255,255,255,0.8);}
.card .imgBx img{max-width: 50px;}
.card:hover .imgBx img{max-width: 60px;}
.card .content{width: calc(100% - 40px);height: 100%;padding: 10px;}
.card .content h2{font-size: 18px;}
.card .content p{font-size: 14px;}
.productsOne{padding: 0 20px}
.productsH2{margin:40px auto;}
.productsH2 h2{font-size: 20px;}
.productsH2 p{font-size: 14px;text-align: left;padding-top: 10px;}
.productsBg::before{content: '';position: absolute;top: 62%; right: 0;width: 100%;height: 10%;background: rgba(0,0,0,0.1);}
.productsContent{justify-content: center;align-items: center;flex-direction: column;}
.productsContent .textBox{max-width: 100%;}
.productsContent .textBox h2{font-size:18px;}
.productsContent .textBox p{font-size: 12px}
.productsContent .textBox p strong{font-size: 13px}
.productsContent .textBox a{padding: 8px 35px; font-size: 16px;margin-top: 12px;}
.productsContent .imgBox{width: 100%;display: flex;justify-content: center;margin: 0;}
.productsContent .imgBox img{max-width: 90%;margin: 10px 0 0;}
.thumb{width: 94%}
.thumb li{margin: 0 5px;height: 53px;padding: 4px;}
.thumb li p{font-size: 14px}
.thumb li::before{top: -100px;left:185px;font-size: 46px;}
.thumb li img{max-width: 70px;}
/* top */
.backTop{position: fixed;top: 92%;width: 62px;height: 50px;right: 0;z-index: 102;background: rgb(0,0,0,0.7);}
.backTop a{width: 62px;height: 50px;display: flex;justify-content: center;align-items: center;}
.floor p{font-size: 12px;}
}RMʱַ-ҳ