@charset "utf-8";
body{ margin:0px; padding:0px;}
a{ text-decoration:none;}
ul{ list-style:none; margin:0px; padding:0px;}
p{ margin:0px;}
.width{ width:1200px; margin:0 auto;}
.both{ clear:both;}
a{ color:#000; transition:0.5s;}
#box{ width:100%; position:relative; overflow:hidden; height:500px;}
#box img{ transition:0.3s; position:absolute; top:0px; left:0px; height:100%; width:100%; object-fit:cover;}
.arrow{width:100%;}
.arrow a{ position:absolute; top:45%; background-color:rgba(255,255,255,0.8);border-radius:50%; color:#333; font-size:24px; padding:10px 15px; opacity:0;}
#box:hover .arrow a{ opacity:1;}

#logo{ height:80px; padding:20px 0;}
#logo .left{display:inline-block; padding-right:10px;}
#logo .left p{ font-size:36px; font-weight:600; line-height:200%;}
#logo .mid{display:inline-block; border-left:2px solid #CCC; padding:15px; }
#logo .mid p{ padding-left:20px;}
#logo .right{display:inline-block; float:right; background:url(../1.png) left no-repeat;}
#logo .right .p1{ line-height:200%; padding-left:60px;}
#logo .right .p2{ padding-left:60px; font-size:24px; color:rgb(0, 79, 195); font-weight:600;}


#nav{ border-top:1px solid #E1DFE1;}
#nav .nav{ display:flex; justify-content: space-between; margin:10px 0;}
#nav .nav p{text-align:center; width:calc(100% / 6); height:40px; }
#nav .nav p a{line-height:40px; font-size:14px;}
#nav .nav p:hover{ background:rgb(0, 79, 195);}
#nav .nav p:hover a{ color:#FFF;}


#box{}


#key{ border-bottom:1px solid #efefef;}
#key p{ height:85px; line-height:85px; font-size:14px; color:#959494;}
#key p b{ color:#0057ad;}
#key p a{ color:#959494;}
#key p a:hover{ color:#043dba;}


#youshi{ background:url(../AD0I6NrVCxACGAAgsvHK9wUoprX4kAEwgA84wwI.jpg) no-repeat;  height:325px;}
#youshi .title{ padding-top:70px;}
#youshi .title .p1{ line-height:36px; font-size:26px; color:#fff; text-align:center;}
#youshi .title .p2{ line-height:36px; font-size:14px; color:#fff;  text-align:center;}
#youshi .mid{ display:flex; padding-top:80px;}
#youshi .mid .ys{background:url(../AD0I6NrVCxAEGAAgt6PM9wUo2IavFjC1AjiCAg.png) no-repeat; height:258px; width:309px; position:relative;}
#youshi .mid .ys img{position:absolute; width:105px; height:105px; top:-30px; left:104px;}
#youshi .mid .ys .p1{ width:225px; padding-left:40px; padding-top:110px; text-align:center;}
#youshi .mid .ys .p2{width:225px; padding-left:40px; padding-top:10px; font-size:14px; color:rgb(119, 119, 119); line-height:30px;text-align:center;}


#product{ padding-top:200px;}
#product .title{}
#product .title .p1{ line-height:36px; font-size:26px; text-align:center; color:rgb(7, 108, 224);}
#product .title .p2{line-height:36px; font-size:14px;text-align:center; color:#777777;}
#product .type{ display:flex;justify-content: center;}
#product .type p{ width:calc((100% - 60px ) / 6); height:30px; text-align:center; margin:10px 10px; border:1px solid #999;}
#product .type p:hover{ background:rgb(7, 108, 224);}
#product .type p:hover a{ color:#fff;}
#product .type p a{ line-height:30px; width:100%; color:#666666;}
#product .pro{ padding-top:40px; display:flex;flex-wrap: wrap;justify-content: space-around;}
#product .pro .pp{ width:calc((100% - 40px) / 4); padding:15px 0 10px; border:#ccc 1px solid; margin:15px 0;}
#product .pro .pp a{}
#product .pro .pp a img{ width:272px; height:265px; padding-left:10px;}
#product .pro .pp p{ text-align:center; padding:5px 0;}
#product .pro .pp p a{ font-size:14px; color:#666;}
#product .pro .pp:hover{ background:rgb(7, 108, 224);}
#product .pro .pp:hover p a{ color:#fff;}


#question{ background:url(../%E9%97%AE%E9%A2%98.jpg) no-repeat; height:790px;}
#question .title{ padding-top:90px;}
#question .title .p1{line-height:36px; font-size:26px; text-align:center; color:rgb(7, 108, 224);}
#question .title .p2{line-height:36px; font-size:14px;text-align:center; color:#777777;}
#question .mid{ position:relative;}
#question .mid img{ width:400px; height:400px; left:415px; position:absolute; top:130px;}
#question .mid .left{ display:flex; flex-direction: column; position:absolute; top:50px; left:80px;}
#question .mid .left .wt{ padding-top:100px; }
#question .mid .left .wt .p1{ color:rgb(7, 108, 224); font-size:28px; font-weight:600; display:inline-block;}
#question .mid .left .wt .p2{display:inline-block; font-size:14px; color:rgb(68, 68, 68);}
#question .mid .right{display:flex; flex-direction: column; position:absolute; top:50px; right:60px;}
#question .mid .right .wt{padding-top:100px;}
#question .mid .right .wt .p1{color:rgb(7, 108, 224); font-size:28px; font-weight:600; display:inline-block;}
#question .mid .right .wt .p2{display:inline-block; font-size:14px; color:rgb(68, 68, 68);}


#dz{}
#dz .title{ padding-top:40px;}
#dz .title .p1{line-height:36px; font-size:26px; text-align:center; color:rgb(7, 108, 224); }
#dz .title .p2{line-height:36px; font-size:14px;text-align:center; color:rgb(7, 108, 224);}
#dz .left{ display:inline-block;opacity:.12; width:500px; float:left; padding-right:40px;}
#dz .left img{}
#dz .right{display:inline-block; width:clac(100% - 550px); padding-top:30px; padding-left:20px;}
#dz .right .xh{ padding:40px;}
#dz .right .xh .p1{background-image:linear-gradient(90deg, rgb(26, 153, 252) 0%, rgb(7, 108, 224) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:inline-block;}
#dz .right .xh .p1 b{}
#dz .right .xh .p1 b span{ font-size:48px;}
#dz .right .xh .p2{display:inline-block; padding-left:30px;}
#dz .right .xh .p3{color:rgb(119, 119, 119); font-size:12px;line-height:200%;padding-left:95px;}
#dz .right .xh1{padding:40px; }
#dz .right .xh1 .p1{background-image:linear-gradient(90deg, rgb(26, 153, 252) 0%, rgb(7, 108, 224) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:inline-block;}
#dz .right .xh1 .p1 b{}
#dz .right .xh1 .p1 b span{font-size:48px;}
#dz .right .xh1 .p2{display:inline-block; color:rgb(68, 68, 68); padding-left:30px;}
#dz .right .xh1 .p3{ color:rgb(119, 119, 119); font-size:12px; line-height:200%; padding-left:95px;}


#example{ padding-top:60px; background:url(../AD0I6NrVCxACGAAg6YbL9wUoh7ziNzCADzipAw.jpg) no-repeat; height:425px;}
#example .title{ padding-bottom:40px;}
#example .title .p1{ line-height:36px; font-size:26px; text-align:center; color:#fff;}
#example .title .p2{ line-height:36px; font-size:14px;text-align:center; color:#fff;}
#example .mid{  display:flex;flex-wrap: wrap;justify-content: space-around;}
#example .mid .nr{ padding-top:15px;}
#example .mid .nr a{}
#example .mid .nr a img{ width:575px; height:310px; border-radius:10px;}
#example .mid .nr p{ padding:15px 0; text-align:center;}
#example .mid .nr p a{ color:rgb(102, 102, 102);}
#example .mid .nr p:hover a{ color:rgb(7, 108, 224);}
#example .bottom{text-align:center; padding-top:40px; }
#example .bottom p{ display:inline-block; width:165px; height:50px; text-align:center; background:rgb(7, 108, 224);border-radius:10px;}
#example .bottom p a{ line-height:50px; color:#fff; font-size:14px; }


#news{ padding-top:600px;}
#news .title{}
#news .title .p1{line-height:36px; font-size:26px; text-align:center; color:rgb(7, 108, 224);}
#news .title .p2{line-height:36px; font-size:14px;text-align:center; color:#777777;}
#news .mid{ display:flex;flex-wrap: wrap;justify-content: space-around;}
#news .mid .nr{ width:calc(50% - 10px); padding:15px 0;}
#news .mid .nr .left{ display:inline-block; width:200px; float:left;}
#news .mid .nr .left a{}
#news .mid .nr .left a img{ width:200px; height:130px;}
#news .mid .nr .right{display:inline-block; width:calc(100% - 220px); padding-left:10px; padding-top:20px;}
#news .mid .nr .right .p1{}
#news .mid .nr .right .p1 a{}
#news .mid .nr .right .p2{ padding-top:15px;}
#news .mid .nr .right .p2 a{ font-size:12px; color:#777; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;}


#about{ padding:60px 0 40px 0;}
#about .title{}
#about .title .p1{line-height:36px; font-size:26px; text-align:center; color:rgb(7, 108, 224);}
#about .title .p2{line-height:36px; font-size:14px;text-align:center; color:#777777;}
#about .left{ width:540px; display:inline-block; padding-top:10px;}
#about .left img{ width:540px; height:365px;}
#about .left .p1{ font-size:22px; font-weight:600; color:rgb(7, 108, 224); line-height:200%;}
#about .left .p2{display:inline-block; font-size:18px; font-weight:600; color:rgb(7, 108, 224); line-height:200%;}
#about .left .p3{display:inline-block; font-size:14px;line-height:200%; color:rgb(119, 119, 119);}
#about .right{ width:calc(100% - 560px); padding-left:20px; float:right; padding-top:10px;}
#about .right .title{}
#about .right .title .p1{ color:rgb(222, 222, 222); font-size:20px; font-weight:600; text-align:left;}
#about .right .title .p2{ color:rgb(19, 75, 186); font-size:24px;font-weight:600; text-align:left;}
#about .right .mid{ padding-top:40px;}
#about .right .mid p{ font-size:14px; color:rgb(119, 119, 119);}
#about .right .bottom{ padding-top:30px;}
#about .right .bottom p{ width:165px; height:50px; background:#076ce0; text-align:center; border-radius:10px;}
#about .right .bottom p a{ line-height:50px; color:#fff; font-size:14px; }

#links{ padding:0 0 20px;}
#links p{ font-size:14px; color:#333;}
#links p a{ color:#333;}
#links p a:hover{ color:#01a1ea;}

#foot_daohang{ background:#0d62be; text-align:center; padding:10px 0;}
#foot_daohang a{ color:#fff; font-size:14px; display:inline-block; width:140px; height:20px; line-height:20px; position:relative;}
#foot_daohang a:before{ content:''; position:absolute; left:0; top:0; width:1px; height:100%; background:#fff;}
#foot_daohang .fir:before{ content:normal;}

#foot{ background:#2c2c2c; padding:40px 0;}
#foot .left{ float:left;}
#foot .left p{ font-size:14px; line-height:200%; color:#fff;}
#foot .left p a{ color:#fff;}
#foot .right{ float:right;}
#foot .right img{ width:110px; height:110px;}
#foot_nav{ display:none;}

.menu_close{ display:none;}





@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}

#foot{ margin-bottom:40px;}
#foot_nav{ display:block; position:fixed; bottom:0; left:0; width:100%; background:#0d529e;}
#foot_nav a{ height:40px; line-height:40px; color:#fff; float:left; width:calc(100% / 3); text-align:center; font-size:14px;}
#foot_daohang a{ width:90px;}

#youshi .mid{ padding-top:40px; flex-wrap:wrap;}
#youshi .mid .ys{ width:calc((100% - 2px ) / 2); margin:0 0 40px 0;}

#logo .mid{ display:none;}
#logo .left{ padding-right:0;}
#logo .right{ margin-top:10px;}
#logo .right .p1{ padding-left:50px;}
#logo .right .p2{ padding-left:50px; font-size:22px;}
#logo .left p{ width:290px; line-height:120%; text-align:center;}

#product{ padding-top:450px;}
#product .pro .pp{ width:calc((100% - 20px) / 2);}
#product .pro .pp a img{ padding-left:5px;}

#dz .left{ display:none;}
#example .mid .nr a img{ width:270px;}
#news .mid .nr{ width:100%;}

#about .left{ width:100%; display:block;}
#about .left img{ width:100%;}
#about .left .p1{ padding-top:15px;}
#about .right{ width:100%; float:left; padding-top:20px; padding-left:0;}

#question .mid img{ display:none;}
#question{ height:500px;}
#question .mid .left{ left:0; top:0;}
#question .mid .left .wt{ padding-top:50px;}
#question .mid .right{ top:0; right:0;}
#question .mid .right .wt{ padding-top:50px;}
#question .mid .right .wt .p2{ width:240px;}
#question .mid .left .wt .p2{ width:240px;}

}