@charset "UTF-8";

/*通用*/
body { font-family: '微软雅黑'; background: #fff; }

/*图片放大*/
.scale_img dt img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s; }
.scale_img:hover dt img, .scale_img li:hover img { -webkit-transform: scale(1.1) rotate(0deg) translateY(0); -ms-transform: scale(1.1) rotate(0deg) translateY(0); transform: scale(1.1) rotate(0deg) translateY(0); }

/*标题*/
h2 { text-align: center; background: url(../img/t_bg.png) no-repeat center bottom; padding-bottom: 23px; }
h2 a { display: block; text-align: center; color: #156BF8; line-height: 100%; font-size: 40px; font-weight: bold; }
h2 a:hover { color: #156BF8; }
h2 span { display: block; padding-top: 14px; font-size: 18px; color: #666; line-height: 100%; font-weight: normal; }

/*产品中心*/
.pro { padding-top: 64px; height: 1044px; background: url(../img/pro_bg.jpg) no-repeat center top; }
.pro h2 { margin-bottom: 31px; }
.pro_nav { width: 226px; height: 442px; background: #fff url(../img/pro_nav.png) no-repeat center top; }
.pro_nav h3 { height: 78px; font-size: 24px; color: #fff; font-weight: bold; text-align: center; line-height: 100%; padding-top: 23px; box-sizing: border-box; }
.pro_nav h3 span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.3); padding-top: 7px; font-weight: normal; text-transform: uppercase; line-height: 100%; }
.pro_nav ul { margin: 0 2px; }
.pro_nav ul li { position: relative; }
.pro_nav ul li a { display: block; padding-left: 62px; font-size: 16px; color: #666; line-height: 56px; }
.pro_nav ul li:before { content: ""; width: 4px; height: 4px; border: 1px solid #5f5f5f; border-style: solid solid none none; position: absolute; top: 50%; left: 37.5px; margin-top: -2.3px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.pro_nav ul li:after { position: absolute; content: ""; width: 195px; height: 1px; background: #EAEAEA; left: 15px; bottom: 0; }
.pro_nav ul li.cur { margin-top: -1px; border-bottom: 1px solid #fff; }
.pro_nav ul li.cur a { background: url(../img/pro_hover.jpg) no-repeat center; color: #fff; }
.pro_nav ul li.cur:after { display: none; }
.pro_nav ul li.cur:before { border-color: #fff; }
.pro_nav .contact { font-size: 12px; color: #333; line-height: 100%; padding-left: 56px; background: url(../img/pro_tel.png) no-repeat 19px 19px; margin-top: 16px; }
.pro_nav .contact em { display: block; font-size: 20px; color: #156BF8; font-weight: bold; line-height: 100%; }
.pro_nav .product { margin-top: 32px; }
.pro_nav .product img { width: 222px; margin-left: 2px; margin-bottom: 4px; }
.pro_nav .product span { display: block; font-size: 14px; line-height: 20px; padding-left: 28px; color: #333; }
.pro_con { width: 960px; height: 442px; }
.pro_con dt { width: 613px; height: 442px; float: left; overflow: hidden; border: 1px solid #D9D9D9; box-sizing: border-box; }
.pro_con dt img { width: 613px; height: 442px; }
.pro_con dd { float: right; background: #156BF8; box-sizing: border-box; width: 347px; height: 442px; padding: 57px 25px 0 20px; }
.pro_con dd h4 a { display: block; font-size: 18px; color: #fff; line-height: 100%; text-align: center; position: relative; padding-bottom: 22px; font-weight: normal; }
.pro_con dd h4 a:after { position: absolute; width: 33px; height: 2px; content: ""; bottom: 0; left: 50%; margin-left: -16px; background: #fff; }
.pro_con dd p { color: #fff; line-height: 24px; padding: 24px 0 32px; }
.pro_con dd ul { margin-left: 40px; overflow: hidden; margin-bottom: 41px; }
.pro_con dd li { width: 104px; height: 33px; border: 1px dotted white; border-radius: 16px; float: left; margin-right: 16px; margin-bottom: 16px; box-sizing: border-box; line-height: 31px; text-align: center; color: #fff; }
.pro_con dd span { display: block; margin-left: 32px; }
.pro_con dd span a { width: 110px; height: 34px; background: #fff; display: block; color: #156BF8; text-align: center; line-height: 34px; margin-right: 20px; float: left; }
.pro_con dd span a:last-child { background: #fff url(../img/pro_i.png) no-repeat 82px center; text-indent: 22px; text-align: left; }
.products { clear: both; position: relative; }
.products h3 a { display: block; font-size: 18px; color: #156BF8; line-height: 100%; padding-top: 33px; padding-bottom: 17px; }
.products h3 a span { display: block; float: right; font-size: 14px; text-transform: uppercase; }
.products .switch { width: 23px; height: 40px; opacity: 0.38; padding: 21px; position: absolute; top: 204px; transition: .3s; }
.products .prev { left: -61px; }
.products .next { right: -61px; }
.products .switch:hover { opacity: 1; }
.pro_list { width: 1201px; overflow: hidden; }
.pro_list li { width: 385px; height: 331px; border: 1px solid #CECECE; float: left; margin-right: 20px; overflow: hidden; background: #fff; position: relative; transition: .3s; }
.pro_list li img { width: 383px; height: 288px; }
.pro_list li span { font-size: 18px; text-align: center; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; position: absolute; bottom: 0; line-height: 68px; width: 100%; padding: 0 20px; box-sizing: border-box; }
.pro_list li:hover { border-color: #156BF8; }
.pro_list li:hover span { color: #156BF8; }

/*缔造高品质喷码机*/
.feature { background: url(../img/fea_bg.jpg) no-repeat center top; height: 518px; }
.feature h2 { padding-top: 66px; margin-bottom: 40px; }
.feature ul { background: url(../img/f_bg.png) no-repeat 127px 60px; height: 270px; }
.feature li { float: left; margin-right: 7px; width: 192px; text-align: center; }
.feature li i { display: block; width: 80px; height: 80px; background: #0A59DA; border-radius: 50%; margin: 25px auto; transition: .3s; }
.feature li em { display: block; font-size: 24px; color: #333; line-height: 100%; transition: .3s; }
.feature li span { font-size: 16px; color: #666; line-height: 24px; display: block; padding-top: 10px; margin-bottom: 29px; }
.feature li:last-child { margin-right: 0; }
.feature li:hover i { padding: 5px; }
.feature li:hover em { margin-top: -5px; }

/*喷码标识应用视频*/
.case h2 { padding-top: 68px; margin-bottom: 40px; }
.cases { position: relative;width: 472px; height: 453px; overflow: hidden; float:right;}
.case_nav { position: absolute; right: 0; bottom: 0; width: 492px; padding-top: 2px; }
.case_nav li { width: 143px; height: 66px; border: 1px solid #DCDCDC; box-sizing: border-box; font-size: 16px; line-height: 66px; float: left; margin-left: 21px; margin-top: 22px; text-indent: 54px; background: url(../img/ci1.png) no-repeat 21px 17px; }
.case_nav li a { color: #666; display: block; }
.case_nav li.cur { background-position-y: -44px; background-color: #1F90FB; border-color: #1F90FB; }
.case_nav li.cur a { color: #fff; }
.case_nav li:nth-child(2) { background-image: url(../img/ci2.png); }
.case_nav li:nth-child(3) { background-image: url(../img/ci3.png); }
.case_nav li:nth-child(4) { background-image: url(../img/ci4.png); }
.case_nav li:nth-child(5) { background-image: url(../img/ci5.png); }
.case_nav li:nth-child(6) { background-image: url(../img/ci6.png); }
.case_video{ width: 700px; height: 453px; float: left; }
.case_con li { width: 472px; height: 277px; position: relative; float: right; }
.case_con li img { position: absolute; width: 472px; height: 277px; }
.case_con li a { display: block; width: 472px; height: 277px; position: absolute; box-sizing: border-box; padding: 35px 88px 0 79px; background: rgba(15, 123, 234, 0.8); text-align: center; }
.case_con li a h4 { font-size: 24px; color: #fff; font-weight: bold; line-height: 100%; position: relative; padding-bottom: 20px; }
.case_con li a h4:after { position: absolute; content: ""; width: 60px; height: 1px; background: #fff; left: 50%; margin-left: -30px; bottom: 0; }
.case_con li a p { font-size: 16px; line-height: 30px; color: #DEDDDD; margin-top: 13px; }
.yp { padding-bottom: 120px;clear:both;}
.yp h3 a { display: block; font-size: 24px; color: #333; line-height: 100%; padding-top: 38px; padding-bottom: 19px; }
.yp ul { overflow: hidden; }
.yp li { width: 221px; margin-right: 23px; float: left; margin-bottom: 15px; overflow: hidden; }
.yp li a { display: block; line-height: 0; }
.yp li img { width: 221px; height: 109px; }
.yp li span { display: block; font-size: 16px; color: #666; text-align: center; line-height: 36px; overflow: hidden; position: relative; z-index: 2; background: #fff; }
.yp li:hover span { color: #1F90FB; }

/*卓科5大保障*/
.guarantee ul { overflow: hidden; margin-top: 40px; }
.guarantee li { width: 380px; height: 370px; float: left; margin-right: 30px; margin-bottom: 29px; padding: 46px 21px 0 36px; box-sizing: border-box; background: #F2F2F2; position: relative; transition: .3s; }
.guarantee li i { display: block; position: relative; padding-bottom: 26px; line-height: 0; }
.guarantee li i:after { position: absolute; content: ""; width: 43px; height: 2px; background: #ACA8A8; left: 3px; bottom: 0; }
.guarantee li em { font-size: 30px; color: #333; display: block; line-height: 100%; padding-top: 23px; }
.guarantee li span { display: block; font-size: 16px; line-height: 26px; padding-top: 26px; }
.guarantee li b { display: block; font-size: 40px; line-height: 100%; color: #ACACAC; font-weight: bold; position: absolute; left: 40px; bottom: 24px; }
.guarantee li:nth-child(3n) { margin-right: 0; }
.guarantee .gua:hover { background: #156BF8; }
.guarantee .gua:hover i { filter: brightness(8600%); }
.guarantee .gua:hover i:after { background: #fff; }
.guarantee .gua:hover em, .guarantee .gua:hover span { color: #fff; }
.guarantee .gua:hover b { color: #8BB6FC; }
.guarantee .gua:hover:after { content: ""; position: absolute; border: 1px solid #7CADFD; width: 362px; height: 351px; top: 9px; left: 8px; z-index: 2; }
.guarantee .g_kefu { padding: 0; border: 2px solid #E5E5E5; border-radius: 2px; overflow: hidden; }
.guarantee .g_kefu i { position: absolute; top: 0; left: 0; }
.guarantee .g_kefu .kefu { position: absolute; top: 44px; left: 200px; }
.guarantee .g_kefu .kefu .contact span { background: url(../img/g_tel.png) no-repeat left top; text-indent: 27px; line-height: 21px; padding-top: 0; padding-bottom: 6px; font-size: 12px; }
.guarantee .g_kefu .kefu .contact em { text-indent: 0; font-size: 20px; color: #156BF8; line-height: 20px; padding-top: 0; font-weight: bold; }
.guarantee .g_kefu .kefu .ask { display: block; width: 116px; height: 33px; border-radius: 5px; background: #FF9A00 url(../img/gi.png) no-repeat 83px center; text-indent: 20px; color: #fff; line-height: 33px; margin-top: 15px; margin-bottom: 40px; }
.guarantee .g_kefu .kefu img { margin-left: 5px; }

/*新闻百科*/
.news { overflow: hidden; padding-bottom: 74px; }
.news h2 { padding-top: 100px; margin-bottom: 30px; }
.news_con { width: 360px; margin-right: 60px; float: left; }
.news_con h3 { border-bottom: 1px solid #D9D9D9; }
.news_con h3 a { display: block; font-size: 20px; color: #333; line-height: 100%; font-weight: bold; }
.news_con h3 span { display: block; font-weight: normal; font-size: 14px; color: #999; line-height: 100%; padding-top: 10px; padding-bottom: 12px; text-transform: uppercase; }
.news_con dt { width: 359px; height: 194px; margin-top: 19px; overflow: hidden; }
.news_con dt img { width: 359px; height: 194px; }
.news_con dd h4 { font-size: 16px; color: #156BF8; font-weight: bold; line-height: 100%; padding-top: 16px; }
.news_con dd p { font-size: 14px; color: #666; line-height: 28px; padding-top: 12px; }
.news_con li { line-height: 39px; border-bottom: 1px solid #CECECE; }
.news_con li a { padding-left: 17px; display: block; position: relative; color: #999; }
.news_con li a:before { position: absolute; content: ""; width: 0; height: 0; border-width: 4px 4.5px; border-color: transparent transparent transparent #D2D2D2; top: 16px; left: 0; border-style: solid; }
.news_con li a span { float: right; }
.news_con li:hover a { color: #156BF8; }
.news_con li:hover a:before { border-color: transparent transparent transparent #156BF8; }
.wiki { margin-right: 0; }

/*关于卓科*/
.about { height: 747px; background: #F2F2F2; }
.about h2 { padding-top: 68px; margin-bottom: 48px; }
.about dd { width: 450px; float: left; padding-top: 8px; }
.about dd h3 a { font-size: 27px; color: #666; line-height: 100%; padding-bottom: 34px; display: block; position: relative; font-weight: normal; margin-bottom: 34px; }
.about dd h3 a:after { position: absolute; content: ""; width: 54px; height: 2px; background: #FB7004; left: 0; bottom: 0; }
.about dd p { font-size: 15px; line-height: 30px; margin-bottom: 12px; }
.about dd ul { margin-top: 42px; }
.about dd li { width: 64px; float: left; margin-right: 64px; text-align: center; line-height: 0; }
.about dd li span { display: block; font-size: 16px; color: #333; padding-top: 19px; line-height: 100%; }
.about dd li:last-child { margin-right: 0; }
.about dd li:hover span { color: #156BF8; }
.about dt { width: 715px; height: 465px; float: right; box-sizing: border-box; border: 4px solid #fff; overflow: hidden; }
.about dt img { max-width: 100%; }

/*企业愿景*/
.vision { height: 401px; background: url(../img/vision_bg.jpg) no-repeat center top; }
.vision h2 { padding-top: 30px; background: none; padding-bottom: 18px; }
.vision h2 span { font-size: 43px; color: #fff; padding-top: 0; font-weight: bold; }
.vision p { font-size: 21px; color: #fff; line-height: 100%; padding-bottom: 22px; text-align: center; }
.vision a.more { display: block; width: 176px; height: 45px; border: 2px solid #fff; border-radius: 10px; box-sizing: border-box; font-size: 18px; color: #fff; line-height: 41px; text-indent: 34px; margin: 0 auto; transition: .5s; }
.vision a.more i { padding-left: 25px; }
.vision a.more:hover { background: rgba(255, 255, 255, 0.2); }

/**/
@keyframes myfirst {
  0% { left: 0px; top: 0px; }
  25% { left: 0px; top: 10px; }
  50% { left: 0px; top: 0; }
  100% { left: 0px; top: 0px; }
}
@-moz-keyframes myfirst

/* Firefox */
{
  0% { left: 0px; top: 0px; }
  25% { left: 0px; top: 10px; }
  50% { left: 0px; top: 0; }
  100% { left: 0px; top: 0px; }
}
@-webkit-keyframes myfirst

/* Safari and Chrome */
{
  0% { left: 0px; top: 0px; }
  25% { left: 0px; top: 10px; }
  50% { left: 0px; top: 0; }
  100% { left: 0px; top: 0px; }
}
@-o-keyframes myfirst

/* Opera */
{
  0% { left: 0px; top: 0px; }
  25% { left: 0px; top: 10px; }
  50% { left: 0px; top: 0; }
  100% { left: 0px; top: 0px; }
}

/*# sourceMappingURL=index.css.map */

/*# sourceMappingURL=index.css.map */