@charset "utf-8";
/* 全局重置 */
*,
*::before,
*::after {box-sizing: border-box; /* 使用更直观的盒模型 */margin: 0;padding: 0;transition: all 0.3s;}
/* 基础元素重置 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;font-weight: 300;vertical-align: baseline;}
/* HTML5 元素显示设置 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
/* 列表重置 */
ol, ul {list-style: none;}
/* 表格重置 */
table {border-collapse: collapse;border-spacing: 0;}
/* 链接重置 */
a{color: inherit;text-decoration: none;background-color: transparent;}
/* 表单元素重置 */
button, input, optgroup, select, textarea {margin: 0;padding: 0;border: 0;font-family: inherit;font-size: 100%;line-height: 1.15;background: none;outline: none;}
/* 按钮重置 */
button {cursor: pointer;background: none;border: none;}
/* 输入框重置 */
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
/* 清除数字输入框的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
/* 清除搜索框的默认样式 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {-webkit-appearance: none;}
/* 文本区域重置 */
textarea {resize: none; /* 禁止调整大小 */overflow: auto;}
/* 图片和嵌入内容重置 */
embed, iframe, object, video {max-width: 100%;height: auto;border-style: none;display: block;}
img{height: auto;border-style: none;}
/* 禁用状态样式 */
[disabled] {cursor: not-allowed;opacity: 0.5;}
/* 移除所有元素的hover、active、focus状态下的默认样式 */
a:hover, a:active, a:focus,
button:hover, button:active, button:focus,
input:hover, input:active, input:focus,
select:hover, select:active, select:focus,
textarea:hover, textarea:active, textarea:focus {outline: none;text-decoration: none;}
a:hover{transform: translateY(-3px);color: #fff;}
/* 样式重置 */


.area{width: 100%;max-width: 1630px;padding: 0 15px;margin: 0 auto;}
.flex-items-center{display: flex;flex-wrap: wrap;align-items: center;width: 100%;}
.title h2{font-size: 40px;font-weight: 600;position: relative;line-height: 2.2;}
.title h2::after{content: '';display: inline-block;width: 34px;height: 5px;background-color: #f84812;position: absolute;left: 0;bottom: 0;}
.title span{font-size: 24px;color: rgba(0, 0, 0, .2);line-height: 2.1;}
.more{width: 55px;height: 55px;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 20px;border-radius: 50%;background-color: #f84812;font-family: cursive;font-weight: 600;margin-left: auto;}

/* head */
.head{width: 100%;}
.head .area{display: flex;flex-wrap: wrap;align-content: center;
  /* height: 100%; */
}
.head .nav .area{padding: 0;max-width: 1600px;background-color: #fff;}
.head .title{width: 100%;height: 125px;align-content: center;display: flex;}
.head .title .area>div{flex-grow: 1;}
.head .title .area .ico-ul{margin-right: auto;display: flex;flex-wrap: wrap;align-content: center;width: 14%;}
.head .title .area .ico-ul .li{position: relative;cursor: pointer;z-index: 2;}
.head .title .area .ico-ul .li i{display: flex;width: 40px;height: 40px;color: #fff;background-color: #bababa;border-radius: 50%;text-align: center;align-items: center;margin-right: 15px;font-size: 22px;justify-content: center;align-items: center;}
.head .title .area .ico-ul .li p{position: absolute;left: 0;top: 100%;overflow: hidden;background-color: #fff;font-size: 20px;line-height: 2;text-align: center;color: #f84812;font-weight: 600;white-space: nowrap;border-radius: 5px;opacity: 0;transform: translateY(-100%);z-index: -1;}
.head .title .area .ico-ul .li:last-child p{padding: 0 10px;}
.head .title .area .ico-ul .li p img{width: 105px;display: block;}
.head .title .area .ico-ul .li:hover i{background-color: #f84812;}
.head .title .area .ico-ul .li:hover p{opacity: 1;transform: translateY(0%);z-index: 3;}

.head .title .area .logo{width: 50%;max-width: 410px;margin: 0 auto;text-align: center;}
.head .title .area .logo img{max-width: 100%;width: auto;}
.head .title .area .tel{display: flex;align-items: center;font-size: 24px;font-weight: 600;color: #f84812;}
.head .title .area .tel i{width: 32px;height: 32px;display: flex;border: 2px solid #f84812;color: #f84812;margin-left: auto;font-size: 22px;justify-content: center;align-items: center;border-radius: 50%;margin-right: 5px;}
.head .nav{width: 100%;border-top: 1px solid rgba(0, 0, 0, .05);display: flex;flex-wrap: wrap;box-shadow: 0 3px 3px rgba(0, 0, 0, .05);position: relative;}
.head .nav .area>.li{width: 14.28%;
  /* height: 100%; */
}
.head .nav .area .li{position: relative;}
.head .nav .area>.li>a{display: flex;height: 100%;align-items: center;justify-content: center;line-height: 3.5;font-size: 16px;width: 100%;}
.head .nav .area>.li .cd-ul{position: absolute;width: auto;min-width: 100%;top: 100%;left: 100%;z-index: 5;transform: rotateX(90deg);transform-origin: top;}
.head .nav .area>.li>.cd-ul{left: 50%;transform: translateX(-50%) rotateX(90deg);}
.head .nav .area>.li>.cd-ul .li{width: 100%;background-color: #fff;border-bottom: 1px solid rgba(0, 0, 0, .1);padding: 0 8px;}
.head .nav .area>.li>.cd-ul .li a{display: flex;width: 100%;align-items: center;justify-content: center;line-height: 3;font-size: 16px;white-space: nowrap;}
.head .nav .area>.li>.cd-ul .li:last-child a{border-bottom-width: 0;}

.head .nav .m-nav{position: fixed;z-index: 99;left: 50%;top: 0;transform: translate(-50%,-100%);max-width: 100%;box-shadow: 0 2px 5px rgba(0, 0, 0, .1);}
.head .nav .m-nav.active{transform: translate(-50%,0%);}


.head .nav .area .li:hover .cd-ul{transform: translateX(-50%) rotateX(0deg);}
.head .nav .area .li:hover,.head .nav .area>.li>.cd-ul .li:hover{background-color: #f84812;}
.head .nav .area .li:hover>a{color: #fff;}

.banner{height: calc(100vh - 181px);}

/* adv */
.adv{background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat;padding: 50px 0px 160px;}
.adv .area{max-width: 1630px;}
.adv .title{text-align: center;width: 100%;}
.adv .title h2::after{left: 50%;transform: translateX(-50%);}
.adv .ul{background-image: url(../images/path.png);background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat;display: flex;flex-wrap: wrap;width: 100%;height: 320px;padding-bottom: 80px;}
.adv .ul .li{width: calc(20% - 20px);position: relative;}
.adv .ul .li:nth-child(3){margin: 0 50px;}
.adv .ul .li .info{width: 100%;border-radius: 9px;border: 2px solid rgba(186, 23, 23, 0);background-color: rgba(255, 255, 255, 0);padding: 25px 15px 25px;text-align: center;cursor: pointer;position: absolute;bottom: 0;}
.adv .ul .li::after{content: '+';display: flex;position: absolute;left: 50%;top: 100%;transform: translate(-50%,-50%);width: 35px;height: 35px;background-color: rgba(248, 72, 18, 1);border-radius: 50%;color: #fff;justify-content: center;align-items: center;font-size: 26px;border: 4px solid rgba(255, 255, 255, .6);cursor: pointer;}
.adv .ul .li:last-child{margin-right: 0;}
.adv .ul .li .img{display: flex;flex-wrap: wrap;align-items: start;justify-content: center;width: 100%;}
.adv .ul .li .img i{font-size: 50px;color: #f84812;line-height: 1;}
.adv .ul .li .img h4{font-size: 20px;font-weight: 600;line-height: 2.5;width: 100%;}
.adv .ul .li .text{width: 100%;}
.adv .ul .li .text p{line-height: 30px;font-size: 15px;color: rgba(0, 0, 0, .6);text-align: left;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;height: 0px;}

.adv .ul .li:nth-child(1),.adv .ul .li:nth-child(5){bottom: 37%;}
.adv .ul .li:nth-child(2),.adv .ul .li:nth-child(4){bottom: 6%;}


.adv .ul .li:hover .info{border: 2px solid rgba(248, 72, 18, 1);background-color: rgba(255, 255, 255, 1);}
.adv .ul .li:hover .info .img i{font-size: 0px;}
.adv .ul .li:hover .info .img h4{color: #f84812;}
.adv .ul .li:hover .info .text p{height: 150px;}
.adv .ul .li:hover::after{background-color: #797979;color: #797979;width: 30px;height: 30px;}


/* foot */
.footer{padding-top: 50px;background-color: #222;}
.footer .area{display: flex;flex-wrap: wrap;align-items: start;}
.footer .area .left{width: 500px;padding-right: 30px;border-right: 1px solid rgba(255, 255, 255, .1);}
.footer .area .logo{width: 100%;margin-bottom: 20px;}
.footer .area .logo img{max-width: 70%;width: auto;}
.footer .area .contact-info{width: 100%;display: flex;flex-wrap: wrap;align-items: start;}
.footer .area .contact-info h3{font-size: 32px;color: #f84812;font-weight: 600;line-height: 1;margin-bottom: 15px;width: 100%;}
.footer .area .contact-info p{min-width: 50%;line-height: 2;font-size: 16px;color: rgba(255, 255, 255, .5);}
.footer .area .wx-qrcode{width: 100%;display: flex;flex-wrap: wrap;align-items: start;margin-top: 15px;}
.footer .area .wx-qrcode .li{width: 50%;max-width: 105px;margin-right: 30px;display: flex;flex-wrap: wrap;justify-content: center;}
.footer .area .wx-qrcode .img{width: 100%;border-radius: 5px;overflow: hidden;}
.footer .area .wx-qrcode .img img{width: 100%;display: block;}
.footer .area .wx-qrcode p{line-height: 3;font-size: 15px;color: rgba(255, 255, 255, .2);}

.footer .area .right{width: calc(100% - 500px);padding-top: 30px;}
.footer .area .right .ul{display: flex;flex-wrap: wrap;align-items: start;width: 100%;justify-content: end;padding-left: 30px;}
.footer .area .right .li{max-width: 160px;flex: 1;-webkit-flex: 1;display: inline-grid;}
.footer .area .right .li:last-child{flex: inherit;-webkit-flex: inherit;}
.footer .area .right .li a{font-size: 15px;color: rgba(255, 255, 255, .5);line-height: 2.5;width: 100%;display: inline-block;}
.footer .area .right .li a:first-child{font-size: 20px;color: rgba(255, 255, 255, 1);margin-bottom: 15px;}

.footer .area .copyright{width: 100%;}
.footer .area .copyright p{font-size: 14px;color: rgba(255, 255, 255, .2);text-align: right;line-height: 2;padding: 10px 0;}


.right_nav_bar {
  position: fixed;
  right: 0;
  bottom: 15px;
  z-index: 10001;
  width: 57px;
}

.right_nav_bar li {
  position: relative;
  list-style: outside none none;
  float: left;
  height: 54px;
  width: 57px;
  background-color:#f84812;
}

.right_nav_bar li:hover .icons {
  width: auto;
  background-color:#f84812;
  font-size: 14px;
  color: #fff;
  top: 0;
}

.right_nav_bar .icons {
  height: 54px;
  width: 57px;
  float: left;
  position: absolute;
  right: 0;
  transition: all 0.3s ease 0s;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  display: block;
}

.right_nav_bar span.title {
  padding-right: 10px;
  color: #fff;
  position: relative;
  font-size: 16px;
  top: -20px;
}

.right_nav_bar .phone-icon span.title {
  top: -18px;
  font-size: 22px;
}

.right_nav_bar i.icon {
  background-repeat: no-repeat;
  height: 54px;
  width: 57px;
  display: inline-block;
  background-position: center center;
  -webkit-background-size: 30px 30px;
  background-size: 30px 30px;
}

.black.right_nav_bar span.title {
  color: #fff;
}
.right_nav_bar .zx{

}
.right_nav_bar .wx-icon i {
  background-image: url(../images/wx.png);
}

.right_nav_bar .zixun-icon i {
  background-image: url(../images/qq.png);
}
.right_nav_bar .zx i {
  background-image: url(../images/liuyan.png);
}
.right_nav_bar .phone-icon i {
  background-image: url(../images/phone.png);
}
.right_nav_bar .top-icon i {
  background-image: url(../images/js-top.png);
}

.right_nav_bar .qr {
  position: absolute;
  left: -215px;
  top: -48px;
  width: 150px;
  height: 150px;
  display: none;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

.right_nav_bar .qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.right_nav_bar .wx:hover .qr {
  display: block;
}


@media screen and (min-width: 0px) and (max-width:1400px){
  .title h2{font-size: 36px;}
  .title span{font-size: 22px;}

  .adv .ul{padding-bottom: 70px;}

  .footer .area .right .li a:first-child{font-size: 18px;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
  .adv .ul{padding-bottom: 60px;}

  .footer .area .right .li a:first-child{font-size: 16px;}
}
@media screen and (min-width: 0px) and (max-width:1024px){
  .head .title .area .tel{font-size: 22px;}
  .title h2{font-size: 32px;}
  .more{width: 50px;height: 50px;}

  .adv .ul{padding-bottom: 50px;}
  .adv .ul .li:nth-child(1), .adv .ul .li:nth-child(5){bottom: 22%;}

  .footer .area .left{width: 100%;padding-right: 0;}
  .footer .area .right{display: none;}
  .footer .area .contact-info p{width: 100%;}
}
@media screen and (min-width: 0px) and (max-width:992px){
  .nbanner{height: auto;padding-bottom: 34%;}
  .head .title .area .tel{font-size: 20px;}

}
.head .nav .area .li.cn{display: none;}
@media screen and (min-width: 0px) and (max-width:768px){


  .right_nav_bar{
    display: none;
  }

  
  .col-xs-6:nth-child(2n-1){padding-right: 7.5px;}
  .col-xs-6:nth-child(2n){padding-left: 7.5px;}

  .head .title .area .logo{width: 100%;}
  .head .title .area .logo img{max-width: 50%;}
  .head .title{height: 100px;}
  .head .nav .area .li{width: 25%;}
  .head .nav .area .li.cn{display: inline-block;}
  .banner{height: calc(100vh - 277px);}
  .head .nav .area>.li>.cd-ul .li a{font-size: 15px;}

  .adv{padding: 20px 0;}
  .adv .ul{height: auto;padding-bottom: 30px;}
  .adv .ul .li{width: 100%;bottom: 0!important;}
  .adv .ul .li:nth-child(3){margin: 0;}
  .adv .ul .li .info{position: relative;display: flex;align-items: center;padding: 15px 0;margin-bottom: 10px;}
  .adv .ul .li::after{display: none;}
  .adv .ul .li .img{width: 130px;}
  .adv .ul .li .img i{font-size: 40px;}
  .adv .ul .li .img h4{font-size: 18px;}
  .adv .ul .li:hover .info .img i{font-size: 40px;}
  .adv .ul .li .text p{height: auto;padding-left: 15px;}
  .adv .ul .li:hover .info .text p{height: auto;}

}
@media screen and (min-width: 0px) and (max-width:767px){
  .head .title .area .tel{display: none;}
}

@media screen and (min-width: 0px) and (max-width:440px){
  .adv .ul .li .img h4{font-size: 15px;}
  .head .title{height: 75px;}
  .head .title .area .logo img{width: 90%;}
  .head .nav .area>.li>a{font-size: 15px;line-height: 3;}
  .head .nav .area>.li>.cd-ul{display: none!important;}
  .banner{height: calc(75vh - 230px);}
  .title h2{font-size: 26px;}
  .title span{font-size: 18px;}
  .more{width: 40px;height: 40px;}

  .adv{padding-top: 10px;}
  .adv .ul{padding-bottom: 0;}
  .adv .ul .li .img{width: 100px;}
  .adv .ul .li .img i{font-size: 17px;}
  .adv .ul .li:hover .info .img i,.adv .ul .li .img i{font-size: 35px;}
  .adv .ul .li .text p{font-size: 14px;}

  .footer{padding-top: 40px;}
  .footer .area .contact-info h3{font-size: 28px;}
  .footer .area .contact-info p{font-size: 15px;line-height: 2.4;}
  .footer .area .copyright p{text-align: center;}
}
@media screen and (min-width: 0px) and (max-width:320px){

}