@charset "UTF-8";
/* Css Public */
*, *:after, *:before{ box-sizing:border-box; -webkit-box-sizing:border-box;}
html{ font-family:-apple-system, "Helvetica Neue", "Helvetica", "Arial", "Microsoft YaHei", "Microsoft JhengHei", SimSun, sans-serif; font-size:14px; color:#333; line-height:24px;}
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{ width:expression(document.body.clientWidth <= 320? "320px": "auto"); min-width:320px; background-color:#fff;}
body,div,ul,li,dl,dt,dd,ol,form,a,span,p,h1,h2,h3,h4,h5,h6,label,table,tbody,tr,th,td,object,iframe,icon{ margin:0px; padding:0px;}
html,body{ height:100%;}
img{ vertical-align:bottom; border:none;}
ul,li{ list-style-type:none;}
a{ color:#333; text-decoration:none;}
a:hover{ color:#1d2088;}
a{ outline:none;}
a:active{ star:expression(this.onFocus=this.blur());}
:focus{ outline:0;}
.clear{ width:0; height:0; padding:0; margin:0; clear:both;}
.flex { display:flex; justify-content:space-between;}
.main{ max-width:1600px; margin:auto;}
@media screen and (max-width: 1650px) { .main{ max-width:inherit; margin:0 3.5%;}}
@media screen and (max-width: 1024px) { .main{ margin:0 15px;}}
::-webkit-scrollbar{ width:8px;}
::-webkit-scrollbar-track{ background:#f0f0f0;}
::-webkit-scrollbar-thumb{ background:#c0c0c0;}
::-webkit-scrollbar-thumb:window-inactive{ background:#c0c0c0;}
::-webkit-scrollbar-thumb:vertical:hover{ background:#c0c0c0;}
@media screen and (max-width:1024px){::-webkit-scrollbar{ width:0;}}

/* Css Top */
.db-bg{ position:fixed; top:0; left:0; width:100%; height:80px; background-color:#fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); z-index:100;}
.db-mb{ display:none;}
.db-mb a{ display:block; position:absolute; left:15px; top:0; width:20px; height:50px;}
.db-mb a span{ display:block; position:absolute; left:0; top:50%; width:20px; height:2px; margin-top:-1px; background-color:#1d2088;}
.db-mb a span::before,.db-mb span::after{ content:''; position:absolute; width:100%; height:100%; left:0; background-color:inherit;}
.db-mb a span::before{ bottom:6px;}
.db-mb a span::after{ top:6px;}
.db-lg{ float:left; width:180px; height:60px; background-image:url(../Images/logo.png); background-repeat:no-repeat; background-position:center; background-size:180px 60px; margin:10px 0 0 25px;}
.db-lg a{ display:block; width:100%; height:100%;}
.db-yb{ float:right;}
.db-yb a{ display:block; float:left; width:81px; height:80px; border-left:1px solid #eee; background-image:url(../Images/tb01.png); background-repeat:no-repeat; background-position:center; background-size:27px 24px; transition:all .3s ease;}
.db-yb a:hover{ background-color:#008ccf; background-image:url(../Images/tb1.png);}
.db-lb{ float:right; margin-right:70px;}
.db-lb > li{ float:left; margin:0 30px; position:relative;}
.db-lb > li > a{ display:block; font-size:16px; font-weight:bold; color:#333; height:80px; line-height:80px;}
#index .db-lb > li:nth-of-type(1) > a, #about .db-lb > li:nth-of-type(2) > a, #strength .db-lb > li:nth-of-type(3) > a, #product .db-lb > li:nth-of-type(4) > a, #news .db-lb > li:nth-of-type(5) > a, #contact .db-lb > li:nth-of-type(6) > a, .db-lb > li:hover > a{ color:#1d2088;}
.db-ls{ position:absolute; left:-32%; top:80px; width:164%; opacity:0; background-color:#008ccf; visibility:hidden; transform:translateY(20px); transition:all .5s ease;}
.db-lb > li:nth-child(4) .db-ls{ left:-115%; width:330%;}
.db-lb > li:hover .db-ls{ opacity:1; visibility:visible; transform:translateY(0);}
.db-ls > li > a{ display:block; font-size:15px; color:#fff; line-height:30px; padding:5px 20px; transition:all .3s ease;}
.db-ls > li > a:hover{ background-color:#00adff;}
@media screen and (max-width:1440px){ 
.db-lb{ margin-right:50px;}
.db-lb > li{ margin:0 25px;}
}
@media screen and (max-width:1280px){ 
.db-lb{ margin-right:30px;}
.db-lb > li{ margin:0 20px;}
}
@media screen and (max-width:1080px){ 
.db-lb{ margin-right:20px;}
.db-lb > li{ margin:0 15px;}
}
@media screen and (max-width:1024px){ 
.db-bg{ height:50px;}
.db-mb{ display:block;}
.db-lg{ float:inherit; width:108px; height:36px; background-size:108px 36px; margin:7px auto;}
.db-lb{ display:none;}
.db-yb a{ position:absolute; right:43px; top:15px; width:23px; height:20px; border-left:none; background-size:23px 20px;}
}

/* Css Search */
.db-sy{ float:right; width:81px; height:80px;}
#toggle-search{ display:block; width:100%; height:100%; border-left:1px solid #eee; background-color:#fff; background-image:url(../Images/tb02.png); background-repeat:no-repeat; background-position:center; background-size:22px 24px; cursor:pointer; transition:all .3s ease;}
#toggle-search:hover{ background-color:#008ccf; background-image:url(../Images/tb2.png);}
#search-form{ position:absolute; top:80px; right:0; width:300px; max-height:0; background-color:rgba(255,255,255,.8); overflow:hidden; transition:max-height, 0.5s;}
#search-form.open{ max-height:50px;}
#search-form input{ font-family:Arial, Helvetica, sans-serif; height:50px; border:none;}
#search-form input[type="search"]{ width:100%; padding:0 15px; background:transparent;}
#search-form input[type="submit"]{ position:absolute; bottom:0; right:0; width:80px; color:#fff; text-transform:uppercase; background:#00499e; cursor:pointer;}
@media screen and (max-width:1024px){ 
.db-sy{ float:inherit; position:absolute; right:15px; top:15px; width:18px; height:20px;}
#toggle-search{ border-left:none; background-color:inherit; background-size:18px 20px;}
#search-form{ top:50px; width:280px;}
#search-form.open{ max-height:45px;}
#search-form input{ height:45px;}
}

/* Css Icon */
.dj-bg{ width:100%; padding:75px 3.5% 68px; background:url(../Images/icon.jpg) no-repeat center; background-size:cover;}
.dj-bg ul li{ float:left; width:25%;}
.dj-bg ul li dl{ width:60px; height:60px; margin:0 auto; background-color:#008ccf; background-repeat:no-repeat; background-position:center; background-size:30px 30px; border-radius:50%;}
.dj-bg ul li p{ font-weight:bold; color:#fff; text-align:center; margin-top:13px;}
@media screen and (max-width:1024px){
.dj-bg{ padding:50px 15px 45px;}
.dj-bg ul li dl{ width:50px; height:50px; background-size:24px 24px;}
.dj-bg ul li p span{ display:none;}
}
@media screen and (max-width:800px){
.dj-bg ul li{ width:50%;}
.dj-bg ul li:nth-of-type(1), .dj-bg ul li:nth-of-type(2){ margin-bottom:35px;}
}
@media screen and (max-width:640px){
.dj-bg{ padding:45px 15px 40px;}
}
@media screen and (max-width:480px){
.dj-bg{ padding:40px 15px 35px;}
.dj-bg ul li p{ margin-top:10px;}
.dj-bg ul li:nth-of-type(1) p, .dj-bg ul li:nth-of-type(2) p{ height:60px;}
}
@media screen and (max-width:320px){
.dj-bg ul li:nth-of-type(1) p, .dj-bg ul li:nth-of-type(2) p{ height:80px;}
}

/* Css Bottom */
.bt-bg{ padding:72px 0 69px; background-color:#202020;}
.bt-bg .bt-zb{ width:50%;}
.bt-bg .bt-zb li h2{ font-size:18px; color:#fff; margin-bottom:20px;}
.bt-bg .bt-zb li a{ display:block; font-size:14px; color:#999; line-height:36px;}
.bt-bg .bt-zb li a:hover{ color:#fff;}
.bt-bg .bt-yb{ width:250px; padding-top:3px;}
.bt-bg .bt-yb li{ width:110px; font-size:14px; color:#fff; text-align:center;}
.bt-bg .bt-yb li img{ display:block; width:100%; border-radius:3px; margin-bottom:9px;}
@media screen and (max-width:1024px){
.bt-bg{ padding:47px 0 52px;}
.bt-bg .bt-zb{ width:60%;}
.bt-bg .bt-zb li h2{ font-size:16px; margin-bottom:16px;}
.bt-bg .bt-zb li a{ line-height:30px;}
.bt-bg .bt-yb{ width:220px;}
.bt-bg .bt-yb li{ width:100px;}
}
@media screen and (max-width:640px){
.bt-bg{ padding:47px 0 44px;}
.bt-bg .main{ flex-wrap:wrap;}
.bt-bg .bt-zb{ width:100%;}
.bt-bg .bt-yb{ margin:54px auto 0;}
}
@media screen and (max-width:480px){
.bt-bg{ padding:37px 0 34px;}
.bt-bg .bt-yb{ margin:39px auto 0;}
}

/* Css Copyright */
.cy-bg { background: #202020; padding: 32px 0 40px; border-top: 1px solid rgba(255,255,255,.05);}
.cy-bg div{ font-size: 14px; color: #666; line-height: 2; text-align:center;}
.cy-bg dl{ display:table; margin:17px auto 0;}
.cy-bg dl a{ display:block; float:left; width:24px; height:24px; margin:0 5px; background-repeat:no-repeat; background-position:center; background-size:14px 14px; border-radius:50%; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.cy-bg dl a:nth-of-type(1){ background-color:#3a5898;}
.cy-bg dl a:nth-of-type(2){ background-color:#00acee;}
.cy-bg dl a:nth-of-type(3){ background-color:#c9161c;}
.cy-bg dl a:nth-of-type(4){ background-color:#00954f;}
.cy-bg dl a:nth-of-type(5){ background-color:#007bb6;}
.cy-bg dl a:nth-of-type(6){ background-color:#89249e;}
.cy-bg dl a:hover{ background-color:#0075c2;}
@media screen and (max-width:1024px){
.cy-bg { padding: 22px 0 30px;}
}