@charset "utf-8";
/* Css Document */
@font-face{
  font-family:"vi-logo-font-Gotham-Book";
  src:url("../Fonts/vi-logo-font-Gotham-Book.otf");
  src:url("../Fonts/Gotham-Book.eot") format("embedded-opentype"),
      url("../Fonts/Gotham-Book.woff") format("woff"),
      url("../Fonts/Gotham-Book.ttf") format("truetype"),
      url("../Fonts/Gotham-Book.svg") format("svg");
  font-weight:normal;
  font-style:normal;
}
@font-face {
  font-family:"Montserrat-Regular-8";
  src:url("../Fonts/Montserrat-Regular-8.woff2") format("woff2"),
      url("../Fonts/Montserrat-Regular-8.woff") format("woff"),
      url("../Fonts/Montserrat-Regular-8.ttf") format("truetype"),
      url("../Fonts/Montserrat-Regular-8.eot") format("embedded-opentype"),
      url("../Fonts/Montserrat-Regular-8.svg") format("svg");
  font-weight:normal;
  font-style:normal;
}
@font-face {
  font-family:"Montserrat-Bold-3";
  src:url("../Fonts/Montserrat-Bold-3.woff2") format("woff2"),
      url("../Fonts/Montserrat-Bold-3.woff") format("woff"),
      url("../Fonts/Montserrat-Bold-3.ttf") format("truetype"),
      url("../Fonts/Montserrat-Bold-3.eot") format("embedded-opentype"),
      url("../Fonts/Montserrat-Bold-3.svg") format("svg");
  font-weight:normal;
  font-style:normal;
}
*, *:after, *:before{ -webkit-box-sizing:border-box; box-sizing:border-box;}
html{ font-family:"Arial","vi-logo-font-Gotham-Book","PingFang SC","SimHei","黑体","Microsoft YaHei"; font-size:14px; color:#555; line-height:24px;}
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{ background-color:#fff; width:expression(document.body.clientWidth <= 320? "320px": "auto"); min-width:320px;}
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:0; padding:0;}
html,body{ height:100%;}
img{ vertical-align:bottom; border:none;}
ul,li{ list-style-type:none;}
a{ color:#555; text-decoration:none;}
a:hover{ color:#db2b43;}
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;}
.main{ max-width:1200px; margin:auto;}
@media screen and (max-width:1280px){ .main{ max-width:inherit; margin:0 3.5%;}}
::-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 */
.division{ height:150px;}
.db-bg{ position:fixed; top:0; left:0; z-index:100; width:100%; height:150px; background-color:#fff; border-bottom:1px solid #ebebeb;}
.db-ls{ width:100%; height:101px; padding-top:32px; border-bottom:1px solid #ebebeb; position:relative;}
.db-sj{ display:none;}
.db-sj a{ display:block; position:absolute; left:3.5%; top:0; width:20px; height:60px;}
.db-sj a span{ display:block; position:absolute; left:0; top:50%; width:20px; height:2px; margin-top:-1px; background-color:#333;}
.db-sj a span::before,.db-sj span::after{ content:''; position:absolute; width:100%; height:100%; left:0; background-color:inherit;}
.db-sj a span::before{ bottom:6px;}
.db-sj a span::after{ top:6px;}
.db-lg{ width:196px; height:36px; background:url(../Images/logo.png) no-repeat center; background-size:196px 36px; margin:0 auto;}
.db-lg a{ display:block; width:100%; height:100%;}
.db-zb{ position:absolute; left:5%; top:42px; width:auto; height:16px;}
.db-zb a{ display:block; font-family:"Montserrat-Regular-8"; font-size:12px; color:#a0a0a0; text-transform:uppercase; background:url(../Images/db01.png) no-repeat left center; background-size:16px 16px; height:16px; line-height:15px; padding:1px 0 0 25px; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.db-zb a:hover{ color:#db2b43;}
.db-yb{ position:absolute; right:5%; top:42px; width:auto; height:16px;}
.db-yb a{ display:block; font-family:"Montserrat-Regular-8"; font-size:12px; color:#a0a0a0; text-transform:uppercase; background:url(../Images/db02.png) no-repeat right center; background-size:16px 16px; height:16px; line-height:15px; padding:1px 26px 0 0; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.db-yb a:hover{ color:#db2b43;}
.db-lb{ display:table; margin:0 auto;}
.db-lb a{ display:block; float:left; font-size:15px; font-weight:bold; color:#fff; height:48px; line-height:48px; margin:0 35px; overflow:hidden; position:relative;}
.db-lb a div{ position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; color:#333; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.db-lb a:hover div{ top:-100%;}
.db-lb a dl{ position:absolute; top:100%; left:0; z-index:3; width:100%; height:100%; color:#db2b43; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.db-lb a:hover dl{ top:0;}
#index .db-lb a:nth-of-type(1) div, #about .db-lb a:nth-of-type(2) div, #product .db-lb a:nth-of-type(3) div, #news .db-lb a:nth-of-type(4) div, #service .db-lb a:nth-of-type(5) div, #contact .db-lb a:nth-of-type(6) div{ top:-100%;}
#index .db-lb a:nth-of-type(1) dl, #about .db-lb a:nth-of-type(2) dl, #product .db-lb a:nth-of-type(3) dl, #news .db-lb a:nth-of-type(4) dl, #service .db-lb a:nth-of-type(5) dl, #contact .db-lb a:nth-of-type(6) dl{ top:0;}
.db-bg.smaller{ height:110px;}
.db-bg.smaller .db-ls{ height:71px; padding-top:21px;}
.db-bg.smaller .db-lg{ width:152px; height:28px; background-size:152px 28px;}
.db-bg.smaller .db-zb{ top:27px;}
.db-bg.smaller .db-yb{ top:27px;}
.db-bg.smaller .db-lb a{ height:38px; line-height:38px;}
@media screen and (max-width:1024px){ 
.division{ height:61px;}
.db-bg{ height:61px;}
.db-ls{ height:60px; padding-top:19px; border-bottom:none;}
.db-sj{ display:block;}
.db-lg{ width:120px; height:22px; background-size:120px 22px;}
.db-zb{ left:auto; right:3.5%; top:20px;}
.db-zb a{ width:20px; height:20px; line-height:20px; background-size:20px 20px; padding:0; text-indent:20px; overflow:hidden;}
.db-yb{ display:none;}
.db-lb{ display:none;}
.db-bg.smaller{ height:61px;}
.db-bg.smaller .db-ls{ height:60px; padding-top:19px;}
.db-bg.smaller .db-lg{ width:120px; height:22px; background-size:120px 22px;}
.db-bg.smaller .db-zb{ top:20px;}
}
@media screen and (max-width:480px){ 
.division{ height:51px;}
.db-bg{ height:51px;}
.db-ls{ height:50px; padding-top:14px;}
.db-sj a{ height:50px;}
.db-lg{ width:120px; height:22px; background-size:120px 22px;}
.db-zb{ top:15px;}
.db-bg.smaller{ height:51px;}
.db-bg.smaller .db-ls{ height:50px; padding-top:14px;}
.db-bg.smaller .db-lg{ width:120px; height:22px; background-size:120px 22px;}
.db-bg.smaller .db-zb{ top:15px;}
}

/* Css Footer */
.pb-bg{ background:url(../Images/dbBg.jpg) no-repeat center; background-size:cover; padding-top:65px; margin-top:125px;}
.pb-bg h3{ font-family:"Montserrat-Bold-3"; font-size:18px; color:#333; text-transform:uppercase; line-height:15px; margin-bottom:24px;}
.pb-zb{ float:left; width:30%;}
.pb-zb ul li{ color:#888; line-height:14px; margin-top:20px; padding-left:24px; background-repeat:no-repeat; background-position:left center; background-size:14px 14px;}
.pb-zb ul li:nth-of-type(1){ margin-top:0;}
.pb-zb ul li h4{ font-size:14px; color:#333;}
.pb-zb ul li span{ font-size:12px; text-transform:uppercase;}
.pb-zj{ float:left; width:40%;}
.pb-zj ul{ margin-top:-9px;}
.pb-zj ul li{ line-height:32px;}
.pb-zj ul li a{ color:#888; margin-right:35px;}
.pb-zj ul li a:nth-of-type(3){ margin-right:0;}
.pb-zj ul li a:hover{ color:#db2b43;}
.pb-yb{ float:right;}
.pb-yb ul li{ float:left; margin:-5px 0 0 25px; font-size:12px; color:#888; line-height:18px;}
.pb-yb ul li:nth-of-type(1){ margin-left:0;}
.pb-yb ul li img{ display:block; width:100px; height:100px; margin:5px auto 12px; -webkit-border-radius:3px; border-radius:3px; -webkit-box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.05); box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.05);}
.pb-cy{ color:#a0a0a0; text-align:center; margin-top:55px; padding:30px 0; border-top:1px solid #e8e8e8;}
.pb-cy span{ font-family:"vi-logo-font-Gotham-Book";}
@media screen and (max-width:1440px){ 
.pb-bg{ margin-top:105px;}
}
@media screen and (max-width:1024px){ 
.pb-bg{ padding-top:45px; margin-top:65px;}
.pb-bg h3{ font-size:16px; line-height:14px;}
.pb-zb{ width:33%;}
.pb-zb ul li{ margin-top:15px;}
.pb-zj ul{ margin-top:-8px;}
.pb-zj ul li{ line-height:30px;}
.pb-zj ul li a{ margin-right:20px;}
.pb-yb ul li{ margin-left:20px;}
.pb-cy{ margin-top:35px; padding:20px 0;}
}
@media screen and (max-width:880px){ 
.pb-bg{ padding-top:35px; margin-top:55px;}
.pb-bg h3{ margin-bottom:19px;}
.pb-zb{ width:50%;}
.pb-zj{ width:50%;}
.pb-yb{ width:100%; margin-top:30px;}
.pb-yb ul li{ margin-left:0; margin-right:25px;}
.pb-cy{ margin-top:30px; padding:15px 0;}
}
@media screen and (max-width:640px){ 
.pb-bg{ margin-top:45px;}
}
@media screen and (max-width:540px){ 
.pb-bg{ padding-top:30px; margin-top:35px;}
.pb-zb{ width:100%;}
.pb-zj{ width:100%; margin-top:25px;}
.pb-zj ul{ margin-top:-7px;}
.pb-zj ul li{ line-height:28px;}
.pb-yb{ margin-top:18px;}
}
@media screen and (max-width:414px){ 
.pb-cy span{ display:block;}
}