.head { }
.head .header-nav .line { border: solid 1px #e5e5e5 }
.head .header-nav a .ch { color: #00a0e9; font-size: 12px; display: block }
.head .header-nav a .en { color: #b3b3b3; font-size: 12px; display: block }
.line-clamp1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all }
.line-clamp2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all }
.line-clamp3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all }
.line-clamp4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-break: break-all }
#lunbotu { width: 100% }
.banner { width: 100%; position: relative; padding-bottom: 150px }
.banner .buttom { position: absolute; top: 40%; left: 0; right: 0; z-index: 9; width: 80% }
.banner .buttom a { font-size: 60px; color: #dadada }
.banner .buttom .left { float: left; margin-left: 36px }
.banner .buttom .right { float: right; margin-right: 36px }
.banner .swiper-pagination { left: 0; right: 0; bottom: 28% }
.banner .swiper-pagination-bullet { width: 39px; height: 6px; background-color: #cdd8dc; border-radius: 3px; opacity: 1; margin-left: 5px; margin-right: 5px }
.banner .swiper-pagination-bullet-active { background: #00a0e9 }
.pro_nav { z-index: 90; bottom: 80px; left: 0; right: 0; position: absolute; max-width: 1540px; background: #fff; display: flex; flex-direction: row; justify-content: space-around; box-shadow: 0px 5px 30px -5px #bbb; overflow: visible; border-radius: 8px; }
.pro_nav a { }
.pro_nav .line { margin-top: 80px; display: block; width: 1px; height: 60px; background: #e5e5e5; position: absolute;top: 0; left: 0; z-index: -1; }
.pro_nav .item { transition: all .5s; display: block; text-align: center; margin: 0 0; padding: 60px 0 0; width: 100%; height: 234px; position: relative; }
.pro_nav .curr{ z-index: 999; }
.pro_nav .item:hover,
.pro_nav .curr .item { border-radius: 10px; transform: scale(1.1); background-image: url(../images/t14.png); background-size: cover; background-repeat: no-repeat; box-shadow: 0px 4px 12px 1px rgba(0, 0, 0, 0.2); z-index: 1; }
.pro_nav .item:hover .icon img,
.pro_nav .curr .item .icon img { filter: brightness(500%) }
.pro_nav .item:hover .text .ch,
.pro_nav .item:hover .text .en,
.pro_nav .curr .item .text .ch,
.pro_nav .curr .item .text .en { color: #fff }
.pro_nav .item .icon { width: 40px; height: 40px }
.pro_nav .icon img { width: 100%; height: 100%; object-fit: cover }
.pro_nav .item .text { margin-top: 16px; font-size: 12px }
.pro_nav .item .text .ch { color: #00a0e9; transition: all .5s }
.pro_nav .item .text .en { color: #b3b3b3; transition: all .5s }
.product { background-color: #fff; height: 630px }
.product .title { padding: 60px 1% }
.product .list ul { padding: 0 }
.product .list ul li { }
.product .list ul li a { display: block; padding: 5px; }
.product .list ul li a:hover { border: 2px solid #00a0e9; padding: 3px; }
.product .list .item { width: 100%; height: 330px; position: relative; padding: 5% 4%; background-color: #f6f5f8; }
.product .list .item img { width: 100%; }
.product .list .item .dec { margin: 0 6%; position: absolute; bottom: 6% }
.product .list .item .title { padding: 0 0 2px 0; font-size: 14px; color: #332c2b; margin: 0 0 5px 0; position: relative; }
.product .list .item .title:after { content: " "; position: absolute; width: 100px; border-bottom: 2px solid #00a0e9; bottom: 0; left: 0; }
.product .list .item .text { font-size: 11px; color: #332c2b; margin: 0 0 }
.video { }
.video img { width: 100%; height: 100%; object-fit: cover }
.contact { margin-top: 64px }
.contact .info { display: flex; justify-content: flex-start }
.contact .info .button { width: 162px; height: 45px; background-color: #00a0e9; margin: 13% 0; font-size: 16px; text-align: center }
.contact .info .button a { color: #ffffff; line-height: 45px; display: inline-block; width: 100%; height: 100% }
.contact .info .img img { width: 100% }
.contact .textinfo .title .ch { font-size: 24px }
.contact .textinfo .title .en { font-size: 16px; color: #ababab }
.contact .textinfo .line { height: 1px; width: 40px; border-bottom: 4px solid #00a0e9; margin: 40px 0 }
.contact .textinfo .contact_info p { padding: 0; margin: 0 }
.contact .textinfo .contact_info p:nth-child(1), .contact .textinfo .contact_info p:nth-child(3) { font-size: 16px; color: #000000; font-weight: 400 }
.contact .textinfo .contact_info p:nth-child(2) { font-size: 30px; color: #00a0e9; font-weight: bold }
.about { position: relative }
.about.bg { background: url(../images/t5.jpg) no-repeat center; background-size: auto 100%; }
.about .title { }
.about .text { padding: 17% 0 27.5%; font-size: 14px; color: #fff; line-height: 1.5; text-indent: 2em }
.about .more { margin-top: 45%; width: 162px; height: 45px; background-color: #00a0e9; line-height: 45px; text-align: center }
.about .more a { color: #fff; font-size: 16px; text-align: center }
.service { height: 630px; width: 100%; position: relative; background: url(../images/t8.jpg) no-repeat center }
.service .title { text-align: center; padding: 75px 0 0 }
.service .title p:nth-child(1) { margin: 0 auto; width: 30%; font-size: 31px; color: #ffffff; border-bottom: 1px solid #fff; padding: 1% 0 0 }
.service .title p:nth-child(2) { font-size: 16px; color: #ffffff; margin: 0 0 }
.service .list { margin-top: 60px }
.service .list .item { height: 331px; background: url(../images/t13.png) no-repeat center }
.service .list .item .title { padding: 120px 0 5px; width: 70%; font-size: 24px; color: #00a0e9; border-bottom: 1px solid #e5e5e5 }
.service .list .item .text { margin-top: 10px; width: 70%; font-size: 12px; line-height: 20px; color: #727272 }
.service  .buttom { position: absolute; bottom: 33%; left: 0; right: 0; width: 80%; display: flex; justify-content: space-between }
.service  .buttom a { margin: 0 }
.news { width: 100%; height: 630px; position: relative; text-align: center; background: url(../images/t7.jpg) no-repeat center top; }
.news .title { margin: 90px 0; text-align: left }
.news .news_list { margin-top: 90px; padding-bottom: 70px }
.news .news_list ul{ padding: 0; }
.news .more { margin: 320px  0 0; text-align: center; width: 44px; height: 44px; border-radius: 50%; background: #00a0e9 }
.news .more a { color: #fff; font-size: 30px; font-weight: bold; line-height: 0.5 }
.news .news_list .item { padding: 10px; margin: 0 10px; height: 435px; overflow: hidden; }
.news .news_list .item:hover { outline: 3px solid #00a0e9; outline-offset: 4px }
.news .news_list .item .img { height: 0; padding-bottom: 85%; overflow: hidden; }
.news .news_list .item .img img { width: 100%; }
.news .news_list .item .info { text-align: left; margin: 15px 5px; height: 160px; overflow: hidden; }
.news .news_list .item .info .date { font-size: 16px; color: #332c2b; margin: 0 0 8px; }
.news .news_list .item .info .title { margin: 0; font-size: 18px; color: #332c2b; line-height: 1.2; height: 42px; overflow: hidden; }
.news .news_list .item .info .line { width: 46px; height: 6px; background-color: #00a0e9; margin-bottom: 10px; }
.news .news_list .item .info .text { margin: 0; font-size: 12px; color: #818181; }
.news .news_list .item.ob-item .info{ margin-top:0; margin-bottom:30px }
@media screen and (max-width:1025px) {
    .banner{ padding-bottom: 3%; }
    .banner .swiper-pagination { bottom: 6% }
    .banner .swiper-pagination:after { top: 67.5% }
    .banner .buttom{ width: 90%; }
    .about .title { margin: 4% 0; padding: 3% 0; width: 40%; font-size: 20px; color: #fff; background: #00a0e9 }
    .about .bg { padding-bottom: 50% }
    .about .text { padding: 0 4% 6%; font-size: 14px; color: #fff; line-height: 1.5; text-indent: 2em; width: 45%; margin-left: 0; }
}
@media screen and (max-width:769px) {
    .service .buttom{ display: none; }
    .newsi-left{ position: relative; padding: 0 15px!important; }
    .newsi-left .title{ margin-top:30px; margin-bottom: 0; }
    .newsi-left .more{ margin-top:0; position: absolute; right: 15px; bottom: 15px; }
    .news{ height: auto; }
    .news .news_list{ margin-top: 30px; padding-bottom:30px; }
    .contact .info .button{ margin-left: auto; margin-right: auto; }
}
@media screen and (max-width:650px) {
    .banner .swiper-pagination:after { display: none }
    .banner .swiper-pagination-bullet { margin: 4% 0 0 4% }
    .banner .buttom { display: none }
    .contact .info { display: block; padding: 0 4% }
    .about .bg { padding-bottom: 90% }
    .service{ height: auto; padding: 1px 0; }
    .service .title p:nth-child(1) { width: 90% }
}
@media only screen and (max-width: 640px){
    .news .news_list .item{ height: auto; }
    .news .news_list .item .img{ display: none; }
    .news .news_list .item.ob-item .info{ margin: 15px 5px; }
    .about .text { width: 100%; padding-bottom: 60%; }
    .about.bg { background-position: 70% center ; }
    .news .news_list .item .info{ height: auto; }
    .news .news_list .item .info .title{ height: auto; }
    .contact{ margin-top: 10%; }
    .contact .textinfo .line{ margin-top: 5%; margin-bottom: 5%; }
    .product{ height: auto; padding-bottom: 10%; }
    .product .title{ padding-top:30px; padding-bottom: 30px; }
    .product .list .item{ height: 250px; }
    .product .list .item .title{ font-size: 12px; }
    .product .list .item .dec{ margin-left: 2%; margin-right: 2%; }
}
@media screen and (max-width:375px) {
    .contact .info .button { margin: 15% auto }
    .product .list .item{ height: 230px; }
}
@media screen and (max-width:320px) {
    .product .list .item{ height: 200px; }
}