@charset "UTF-8";

/** @desc mod_style @author Tven @date 2023-1-8 */

.header { height: 5rem; position: fixed; top: 0; left: 0; width: 100%; z-index: 99; background: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }



.header .container { display: flex; align-items: center; justify-content: space-between; }



.logo { height: 5rem; }



.logo a { display: block; height: 100%; }



.logo a img { display: block; height: 100%; }



.xs_menu { display: none; }



.header .nav { display: flex; align-items: center; justify-content: flex-end; text-transform: capitalize; }



.header .nav > ul { display: flex; align-items: center; justify-content: flex-start; }



.header .nav > ul > li { position: relative; margin: 0 0.5rem; }



.header .nav > ul > li.active > a { color: #3a3a3a; }



.header .nav > ul > li.active::after { content: ''; width: 100%; height: 4px; background: #3a3a3a; position: absolute; left: 0; bottom: 0; }



.header .nav > ul > li:hover > a { color: #3a3a3a; }



.header .nav > ul > li > a { padding: 0 1rem; display: block; position: relative; line-height: 5rem; font-size: 0.875rem; color: #333; transition: all 0.3s ease; }



.nav > ul > li ul { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(1rem); opacity: 0; pointer-events: none; transition: all 0.5s ease-out; background: #fff; padding: 1rem; border-radius: 2px; box-shadow: 0 2px 0.75rem 0 rgba(0, 0, 0, 0.1); min-width: 12.5rem; }



.nav > ul > li ul:after { content: ''; width: 100%; height: 5px; position: absolute; bottom: 100%; left: 0; }



.nav > ul > li:hover ul { opacity: 1; transform: translateX(-50%) translateY(5px); pointer-events: auto; }



.nav > ul > li ul li a { font-size: 0.875rem; color: #999; height: 2.25rem; line-height: 2.25rem; display: block; transition: all 0.3s ease; }



.nav > ul > li ul li a:hover { color: #555; }



.head_search { position: relative; margin-left: 1rem; }



.search_input { border: 1px solid #DCDFE6; border-radius: 18px; height: 2.25rem; transition: border-color 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); padding-left: 1rem; padding-right: 2.25rem; outline: none; font-size: .875rem; color: #333; }



.search_input:hover { border-color: #C0C4CC; }



.search_btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #3a3a3a; color: #fff; border: none; transition: all .3s ease; outline: none; }



.search_btn:hover { filter: brightness(1.1) contrast(110%); }



.s_biao { text-align: center; margin-bottom: 2.5rem; }



.s_biao strong { display: inline-block; padding-bottom: 1rem; position: relative; font-size: 1.5rem; }



.s_biao strong:after { content: ''; width: 4.375rem; height: 3px; background: #3a3a3a; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }



.s_biao p { line-height: 1.5rem; font-size: 0.875rem; color: #666; }



.s_banner { width: 100%; margin-top: 5rem; }



.s_banner a { padding-top: 35.4%; display: block; width: 100%; }



.s_about { background: url(http://b.xinshidian.net/demoxsd00100/images/zhong01_bj.jpg) center bottom no-repeat; background-size: cover; padding: 3.75rem 0; }



.s_about p { text-align: center; line-height: 1.875rem; color: #666; margin-top: 2.5rem; }



.about_ico { text-align: center; }



.about_ico i { color: #3a3a3a; font-size: 1.875rem; }



.about_ico strong { display: block; color: #333; margin: 5px 0; font-size: 1.25rem; }



.about_ico span { color: #909399; font-size: 0.875rem; }



.s_product { padding: 3.125rem 0; }



.s_product ul { display: flex; justify-content: center; align-items: center; margin-bottom: 1.875rem; }



.s_product ul li { margin: 0 .5rem; }



.s_product ul li a { display: block; padding: 0.5rem 1rem; font-size: 1rem; border-radius: .375rem; font-weight: bold; color: #333; transition: all 0.3s; }



.s_product ul li a.active { background: #3a3a3a; color: #fff; }



.scp_list { display: flex; flex-wrap: wrap; }



.cp_li:not(:nth-child(3n)) { margin-right: 2%; }



.cp_li { width: 32%; position: relative; margin-bottom: 1.25rem; }



.cp_li a { display: block; }



.cp_img { padding-top: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; }



.cp_title { position: absolute; width: 100%; left: 0; bottom: 0; z-index: 2; background: rgba(0, 0, 0, 0.5); color: #fff; transition: all 0.3s; padding: 0.5rem 1rem; box-sizing: border-box; font-size: 1rem; }



.cp_title span { display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



.cp_li:hover .cp_title { background: #3a3a3a; }



.s_solution { padding: 3.125rem 0; background: #f7f7f7; }



.case_list { display: flex; flex-wrap: wrap; }



.case_li:not(:nth-child(4n)) { margin-right: calc(8%/3); }



.case_li { width: 23%; border-radius: 4px; overflow: hidden; margin-bottom: 1.875rem; }



.case_img { padding-top: 64.8%; background-position: center; background-size: cover; background-repeat: no-repeat; }



.case_text { border: 1px solid #dedede; border-top: none; padding: 1rem; transition: all 0.3s; background: #fff; }



.case_text h5 { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333; font-size: 1rem; transition: all 0.3s; }



.case_text p { line-height: 1.6; font-size: .875rem; color: #666; margin: 0.625rem 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; transition: all 0.3s; }



.case_text h6 { margin: 0; margin-top: 1rem; }



.case_text h6 button { background: #fff; padding: .5rem 1rem; border: 1px solid #dedede; border-radius: .25rem; font-size: .875rem; }



.case_li:hover .case_text { background: #3a3a3a; border-color: #3a3a3a; }



.case_li:hover .case_text h5 { color: #fff; }



.case_li:hover .case_text p { color: #fff; }



.s_news { padding: 3.125rem 0; }



.s_news .s_biao { margin-bottom: 1.875rem; }



.news_list { display: flex; flex-wrap: wrap; align-items: stretch; }



.news_list .news_li { width: 49%; }



.news_list .news_li:not(:nth-child(2n)) { margin-right: 2%; }



.news_li { border-bottom: 1px solid #dedede; }



.news_li a { display: block; position: relative; padding-top: 1.25rem; padding-bottom: 1.25rem; border-radius: 4px; transition: all 0.3s; }



.news_li a:hover { background: #3a3a3a; border-color: #3a3a3a; }



.news_li a:hover .news_time { color: rgba(255, 255, 255, 0.85); }



/* .news_li a:hover .news_text { border-color: rgba(255, 255, 255, 0.5); } */



.news_li a:hover .news_text h5 { color: #fff; }



.news_li a:hover .news_text p { color: rgba(255, 255, 255, 0.95); }



.news_li a .news_time { position: absolute; top: 50%; left: 0; width: 5.625rem; text-align: center; transform: translateY(-50%); line-height: 1.5rem; font-size: 0.875rem; color: #666; transition: all 0.3s; }



.news_li a .news_time strong { display: block; font-size: 1rem; }



.news_li a .news_text { padding: 0 1.25rem;}



.news_li a .news_text h5 { font-size: 1rem; margin: 0; margin-bottom: 0.625rem; color: #333; transition: all 0.3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }



.news_li a .news_text p { margin: 0; color: #666; transition: all 0.3s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }



.footer { background: #f5f5f5; padding-top: 1.25rem; }



.footer .caption { padding-right: 20%; }



.footer h4 { margin: 1.25rem 0; }



.footer h5 { font-size: 1rem; margin: 1rem 0; }



.footer p { margin-bottom: .5rem; color: #666; }



.footer ul { display: flex; margin-top: 1.25rem; }



.footer ul li { margin-right: 15px; }



.footer ul li:last-child { margin-right: 0; }



.footer ul li:hover a { background: #3a3a3a; color: #fff; }



.footer ul li a { display: flex; align-items: center; justify-content: center; width: 2.625rem; height: 2.625rem; border-radius: 50%; background: #eaeaea; text-align: center; color: #333; transition: all 0.3s; }



.footer ul li a i { font-size: 1.5rem; }



.footer input { width: 100%; height: 2.5rem; padding: 0 1rem; border: 1px solid #dcdcdc; }



.footer textarea { width: 100%; padding: 1rem; border: 1px solid #dcdcdc; }



.footer button { background: #3a3a3a; height: 2.5rem; padding: 0 2rem; border: none; color: #fff; }



.footer .foot_bottom { line-height: 1.5rem; margin-top: 1.875rem; padding: 1rem 0; background: #3a3a3a; color: #fff; }



.footer .foot_bottom .el-col:last-child { text-align: right; }



.footer .foot_bottom a { color: #fff; }



.zhong { padding: 2.5rem 0; }



.n_banner { padding-top: 19.4%; margin-top: 5rem; position: relative; }



.n_banner .container { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }



.n_banner .container strong { font-size: 2.25rem; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; display: inline-block; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); }



.weizhi { padding: 1rem 0; background: #f5f5f5; text-transform: capitalize; }



.weizhi strong { font-size: 1.5rem; }



.weizhi .wz_xie { color: #606266; }



.weizhi .wz_xie em { color: #606266; margin: 0 0.5rem; font-style: normal; vertical-align: middle; }



.weizhi .wz_xie a { color: #606266; }



.weizhi .wz_xie a i { display: inline-block; margin-right: 4px; }



.weizhi .wz_xie a:hover { color: #3a3a3a; }



.ty_head { margin-bottom: 1.25rem; }



.pro_nav > ul > li { background: #3a3a3a; }



.pro_nav > ul > li > a { padding: 0.625rem 1.25rem; cursor: pointer; display: block; font-weight: bold; color: #fff; position: relative; }



.pro_nav > ul > li > a:after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 2; background: #3a3a3a; filter: brightness(50%); }



.pro_nav > ul > li > a:before { content: ''; width: 100%; height: 1px; position: absolute; top: 0; left: 0; z-index: 2; background: #3a3a3a; filter: brightness(150%); }



.pro_nav > ul > li .caption { overflow: hidden; height: 0; transition: height .3s .1s ease-out; }



.pro_nav > ul ul li a { padding: 0.5rem 1.25rem; padding-left: 1.875rem; display: block; color: rgba(255, 255, 255, 0.75); background: #343434; transition: color .3s ease; }



.pro_nav > ul ul li.active a { color: #fff; }



.pro_nav > ul ul li:hover a { color: #fff; }



#gallery { width: 100%; border: 1px solid #dedede; }



#gallery a { padding-top: 100%; display: block; width: 100%; }



#thumbs { margin-top: 0.625rem; }



#thumbs .swiper-slide { opacity: 0.5; }



#thumbs .swiper-slide a { padding-top: 100%; display: block; }



#thumbs .swiper-slide.swiper-slide-thumb-active { opacity: 1; }



.ncp_head h3 { margin-top: 1.25rem; }



.ncp_head p { max-height: 14rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; line-height: 2; font-size: 1rem; }



.ncp_link { margin-top: 1.875rem; }



.ncp_link a { display: block; padding: .8rem 1rem; background: #3a3a3a; color: #fff; font-size: 1rem; text-align: center; }



.ncp_tab { margin: 1.875rem 0; }



.ncp_tab ul { display: flex; }



.ncp_tab ul li { background: #3a3a3a; color: #fff; padding: .8rem 1.25rem; font-size: 1rem; font-weight: bold; width: 100%; }



.lx_content { margin-bottom: 3.125rem; }



.kh_service .swiper { margin: 1.875rem 0; }



.kh_service .swiper .swiper-slide a { display: block; padding-top: 140%; background-position: center; background-size: cover; background-repeat: no-repeat; }



.ico-prev, .ico-next { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.5rem; height: 3.75rem; background: #3a3a3a; opacity: .35; color: #fff; transition: all 0.3s ease; }



.ico-prev:hover, .ico-next:hover { opacity: .85; }



.ico-prev i, .ico-next i { font-size: 24px; }



.ico-prev { left: 0; }



.ico-next { right: 0; }







.fudong{ position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90;}

.fudong ul li{ width: 3.125rem; height: 3.125rem; position: relative; margin-bottom: 1px;}

.fudong ul li .ico_a{  display: flex;  align-items: center;  justify-content: center; width: 3.125rem; height: 3.125rem; background: #333; color: #fff; border-radius: .25rem;  transition: all 0.3s;}

.fudong ul li .ico_a i{ font-size: 1.5rem;}

.fudong ul li:hover .ico_a{ background: #222;}





/* 媒体查询

---------------------------------------------------------------- */

@media (max-width: 991px) { .flex { flex-wrap: wrap; }

  .header .nav { display: none; position: absolute; padding: 1rem 0; padding-bottom: 2rem; top: 100%; left: 0; background: #3a3a3a; flex-wrap: wrap; justify-content: center; width: 100%; }

  .header .nav.active { display: flex; }

  .header .nav > ul { width: 100%; flex-wrap: wrap; }

  .header .nav > ul > li { width: 100%; text-align: center; }

  .header .nav > ul > li:hover > a { color: #fff; }

  .header .nav > ul > li.active:after { background: #fff; }

  .header .nav > ul > li.active > a { color: #fff; }

  .header .nav > ul > li > a { color: #fff; line-height: 3rem; }

  .header .nav > ul > li ul { display: none; }

  .xs_menu { height: 5rem; width: 5rem; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }

  .xs_menu span { width: 70%; height: 8%; background: #3a3a3a; margin: 5% 0; transition: all .3s ease; transform-origin: left 50% 0; }

  .xs_menu.active span:nth-child(1) { transform: rotate(45deg) translateY(-0.58rem); }

  .xs_menu.active span:nth-child(2) { opacity: 0; }

  .xs_menu.active span:nth-child(3) { transform: rotate(-45deg) translateY(0.58rem); }

  .cp_li { width: 49%; }

  .cp_li:not(:nth-child(3n)) { margin-right: 0; }

  .cp_li:not(:nth-child(2n)) { margin-right: 2%; }

  .case_li { width: 49%; }

  .case_li:not(:nth-child(4n)) { margin-right: 0; }

  .case_li:not(:nth-child(2n)) { margin-right: 2%; }

  .news_list .news_li { width: 100%; }

  .news_list .news_li:not(:nth-child(2n)) { margin-right: 0; }

  .n_banner { padding-top: 30%; }

  .zhong .container { position: relative; }

  .pro_nav { position: absolute; top: -2.5rem; left: 0; z-index: 10; transform: translateX(-100%); transition: all .3s ease; }

  .pro_nav.active { transform: translateX(0); }

  .pro_nav.active ul { opacity: 1; pointer-events: auto; }

  .pro_nav .pro_nav_open { position: absolute; left: 100%; top: 0; padding: .3rem 1rem; border-radius: .25rem; background: #43a03e; color: #fff; }

  .pro_nav ul { opacity: 0; pointer-events: none; transition: all .3s ease; } }



@media (min-width: 1280px) { .container { max-width: 1200px !important; padding: 0; } }



@media (min-width: 1921px) { .container { width: 1200px; padding: 0; } }