body { font-size: 14px; line-height: 24px; }
.container { position: relative; width: 1200px; margin: 0 auto; }
img { vertical-align: top; }

/* home-header */
#home-header { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; }
.home-logo { position: absolute; z-index: 1; top: 40px; left: 60px; }
.home-logo img { width: 223px; height: 58px; }
/* home-nav-search */
.home-nav-search { position: absolute; z-index: 1; top: 40px; right: 60px; display: flex; }
/* home-nav */
.home-nav { flex: 1; height: 58px; }
.home-nav ul > li { position: relative; z-index: 99; float: left; line-height: 58px; margin-right: 60px; }
.home-nav ul > li:after { content: ''; position : absolute; z-index: 1; left: 0; bottom: 0; display: block; width: 0px; height: 3px; background-color: #0e6fda; transition: all ease-in-out .2s; }
.nav-search-white .home-nav ul > li:after { background-color: #ffff00; }
.home-nav ul > li.active:after,
.home-nav ul > li:hover:after { width: 100%; }
.home-nav ul > li > a { color: #333; display: block; font-size: 16px; }
.nav-search-white .home-nav > ul > li > a { color: #fff; }
.home-nav ul > li > ul { position: absolute; top: 78px; left: -30px; padding: 10px 0; visibility: hidden; opacity: 0; transition: all ease-in-out .2s; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); }
.home-nav ul > li:hover > ul { visibility: visible; top: 58px; opacity: 1; }
.home-nav ul > li > ul > li { float: none; margin: 0; }
.home-nav ul > li > ul > li > a { display: block; font-size: 14px; color: #333; padding: 0 35px; line-height: 36px; white-space: nowrap; }
.home-nav ul > li ul li.active:after,
.home-nav ul > li ul li:hover:after { width: 0; }
.home-nav ul > li ul li.active > a,
.home-nav ul > li ul li:hover > a { background-color: #0e6fda; color: #fff; }
.home-nav ul > li > ul > li ul { display: none; }
/* home-search */
.home-search { width: 16px; height: 58px; }
.home-search a { display: block; width: 100%; height: 100%; }
.home-search i.layui-icon { color: #333; line-height: 58px; }
.nav-search-white .home-search i.layui-icon { color: #fff; }

/* common header */
#header { width: 100%; height: 100px; }
.logo { position: absolute; z-index: 1; top: 21px; left: 0; }
.logo img { width: 223px; height: 58px; }
/* nav-search */
.nav-search { position: absolute; z-index: 1; top: 0; right: 0; display: flex; }
/* nav */
.nav { flex: 1; }
.nav ul > li { position: relative; z-index: 99; float: left; line-height: 100px; margin-right: 40px; }
.nav ul > li:after { content: ''; position : absolute; z-index: 1; left: 0; bottom: 0; display: block; width: 0px; height: 3px; background-color: #0e6fda; transition: all ease-in-out .2s; }
.nav ul > li.active:after,
.nav ul > li:hover:after { width: 100%; }
.nav ul > li > a { color: #333; display: block; font-size: 16px; }
.nav ul > li > ul { position: absolute; top: 120px; left: -30px; padding: 10px 0; visibility: hidden; opacity: 0; transition: all ease-in-out .2s; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); }
.nav ul > li:hover > ul { visibility: visible; top: 100px; opacity: 1; }
.nav ul > li > ul > li { float: none; margin: 0; }
.nav ul > li > ul > li > a { display: block; font-size: 14px; color: #333; padding: 0 35px; line-height: 36px; white-space: nowrap; }
.nav ul > li ul li.active:after,
.nav ul > li ul li:hover:after { width: 0; }
.nav ul > li ul li.active > a,
.nav ul > li ul li:hover > a { background-color: #0e6fda; color: #fff; }
.nav ul > li > ul > li ul { display: none; }
/* search */
.search { width: 16px; height: 100px; }
.search a { display: block; width: 100%; height: 100%; }
.search i.layui-icon { color: #333; line-height: 100px; }

/* 弹出框search */
#search input { line-height: 75px; height: 75px; font-size: 20px; width: 470px; margin: 0; padding: 0 15px; border: 0; background: none; }

/* banner */
#banner .swiper-slide { width: 100%; }

/* common */
.i-title { display: flex; width: 284px; height: 114px; padding-left: 60px; background-color: #0e6fda; }
.i-title-lf { font-size: 92px; color: #fff; line-height: 114px; font-weight: 700; margin-right: 5px; }
.i-title-rg { flex: 1; margin-top: 33px; }
.i-title-rg p.title { display: inline-block; font-size: 36px; color: #fff; line-height: 36px; font-weight: normal; }
.i-title-rg p.subtitle { font-size: 24px; color: #fff; }

/* 图文效果 */
.media-item { display: block; width: 100%; transition: all .4s linear; }
.media-thumb { overflow: hidden; }
.media-thumb img { display: block; max-width: 100%; position:relative; transition: all .4s linear; }
.media-txt { position: absolute; z-index: 1; left: 15px; bottom: 15px; width: calc(100% - 70px); padding: 5px 20px; font-size: 16px; color: #fff; text-align: center; background-color: rgba(0,0,0,.6); transition: all .4s linear; }
.media-item:hover img { transform:scale(1.2); }
.media-item:hover .media-txt { background-color: rgba(14,84,214,.7); }

/* about */
#about { height: 100%; }
.home-about { padding-top: 155px; }
.home-about-info { padding: 0 15px 0 60px; margin-top: 50px; }
.home-about-info p.title { font-size: 28px; color: #333; line-height: 28px; }
.home-about-info p.desc { height: 140px; font-size: 16px; color: #666; line-height: 28px; overflow: hidden; margin-top: 20px; }
.home-about-thumb { padding-left: 25px; }
.home-about-thumb img { max-width: 100%; }
.home-advantage { display: flex; margin-top: 90px; }
.home-advantage-item { width: calc(100% / 9); cursor: pointer; }
.home-advantage-item .thumb { width: 92px; height: 106px; margin: 0 auto 25px; transition: all .2s linear; }
.home-advantage-item p.title { font-size: 18px; color: #333; text-align: center; transition: all .2s linear; }
.home-advantage-item01 .thumb { background: url('/index/images/icon.png') no-repeat 0 0; }
.home-advantage-item02 .thumb { background: url('/index/images/icon.png') no-repeat 0 -106px; }
.home-advantage-item03 .thumb { background: url('/index/images/icon.png') no-repeat 0 -212px; }
.home-advantage-item04 .thumb { background: url('/index/images/icon.png') no-repeat 0 -318px; }
.home-advantage-item05 .thumb { background: url('/index/images/icon.png') no-repeat 0 -424px; }
.home-advantage-item06 .thumb { background: url('/index/images/icon.png') no-repeat 0 -530px; }
.home-advantage-item07 .thumb { background: url('/index/images/icon.png') no-repeat 0 -636px; }
.home-advantage-item08 .thumb { background: url('/index/images/icon.png') no-repeat 0 -742px; }
.home-advantage-item09 .thumb { background: url('/index/images/icon.png') no-repeat 0 -848px; }

.home-advantage-item:hover .thumb { background-position-x: -92px; }
.home-advantage-item:hover p.title { color: #0e6fda; }

/* product */
#product { position: relative; height: 100%; }
.home-product-title { position: absolute; z-index: 1; top: 180px; left: 60px; font-size: 30px; color: #fff; line-height: 30px; font-weight: 700; }
#product .layui-row { height: 100%; }
#product .layui-col-md3 { height: 100%; }
.home-product-item { height: calc(100% - 280px); padding: 280px 80px 0 60px; background-size: cover; background-repeat: no-repeat; background-position: center; transition: all .3s linear; }
.home-product-item p.title { font-size: 24px; color: #fff; font-weight: 700; }
.home-product-item p.desc { height: 90px; font-size: 16px; color: #fff; line-height: 30px; overflow: hidden; margin: 20px 0 45px; }
.home-product-item a.more { display: block; width: 98px; height: 28px; border: 1px solid #fff; border-radius: 28px; font-size: 16px; color: #fff; line-height: 28px; text-align: center; transition: all .3s linear; }

.home-product-item:hover { height: calc(100% - 265px); padding-top: 265px; }
.home-product-item:hover a.more { background-color: #fff; color: #0e6fda; }

/* case */
#case { height: 100%; background: #fff url('/index/images/case_bg.jpg') no-repeat center top; }
.home-case { padding-top: 190px; }
.home-case-title { margin-top: 15px; margin-bottom: 75px; margin-left: calc(50% - 420px); }
.home-case-title p.title { font-size: 36px; color: #000; line-height: 36px; margin-bottom: 60px; }
.home-case-title a.more { display: block; width: 144px; height: 40px; border: 1px solid #bfbfbf; font-size: 16px; color: #888; text-align: center; line-height: 40px; transition: all .3s linear; }
.home-case-title a.more i.layui-icon { padding-left: 20px; color: #888; transition: all .3s linear; }
.home-case-title a.more:hover { background-color: #0e6fda; border-color: #0e6fda; color: #fff; }
.home-case-title a.more:hover i.layui-icon { color: #fff; }
.home-case-content { position: relative; margin: 0 95px; width: calc(100% - 190px); }
.home-case-item { position: relative; display: block; width: calc(100% - 12px); padding: 0 6px; }
.home-case-item img { display: block; max-width: 100%; }
.home-case-item .mask { position: absolute; z-index: 1; top: 0; left: 6px; width: calc(100% - 12px); height: 100%; background-color: rgba(0,0,0,.4); opacity: 0; filter: alpha(opacity=0); transition: all .3s linear; }
.home-case-item .mask p.title { position: absolute; z-index: 1; left: 15%; top: 50%; margin-top: -28px; width: 70%; height: 56px; font-size: 18px; color: #fff; text-align: center; line-height: 28px; overflow: hidden; }
.home-case-item:hover .mask { opacity: 1; filter: alpha(opacity=100); }
.case-prev { color: #bebebe; left: -35px; top: 50%; margin-top: -22px; }
.case-next { color: #bebebe; right: -35px; top: 50%; margin-top: -22px; }

/* news */
#news { height: 100%; background: url('/index/images/news_bg.jpg') no-repeat center top; }
.home-news { height: calc(100% - 250px); padding-top: 150px; margin: 0 60px; }
.home-news-title { float: left; }
.home-news-title p.title { font-size: 50px; color: #333; line-height: 64px; }
.home-news-title p.subtitle { font-size: 22px; color: #333; margin: 20px 0 25px; }
.home-news-title p.desc { color: #333; }
.home-news-title a.more { display: block; width: 156px; height: 40px; background-color: #0e6fda; color: #fff; text-align: center; line-height: 40px; margin-top: 80px; }
.home-news-content { float: right; width: 67.5%; height: 100%; }
.i-news-item { float: left; display: block; width: calc((100% - 153px) / 3); height: calc(100% - 50px); padding: 50px 30px 0; border-left: 1px solid #c9c9c9; transition: all .3s linear; }
.i-news-item:last-child { padding-right: 0; }
.i-news-item p.date { font-family: Arial; font-size: 18px; color: #333; }
.i-news-item p.title { font-size: 16px; color: #333; margin: 20px 0 25px; transition: all .3s linear; }
.i-news-item p.subtitle { color: #666; }
.i-news-item .thumb { overflow: hidden; margin: 10px 0 25px; }
.i-news-item .thumb img { display: block; max-width: 100%; transition: all .3s linear; }
.i-news-item p.desc { height: 96px; overflow: hidden; color: #666; }
.i-news-item p.more { margin-top: 45px; }
.i-news-item p.more i.icon-right { font-size: 50px; color: #777a7f; transition: all .3s linear; }

.i-news-item:hover { height: calc(100% - 35px); padding-top: 35px; }
.i-news-item:hover p.title { color: #0e6fda; }
.i-news-item:hover .thumb img { transform:scale(1.1); }
.i-news-item:hover p.more i.icon-right { color: #0e6fda; }

/* -----------------------page ------ */
.banner-page { height: 360px; background-color: #fefefe; background-repeat: no-repeat; background-position: center; }
.page-breadcrumb { padding: 20px 0 15px; background-color: #f7f7f7; }
.page-breadcrumb .layui-breadcrumb a:hover { color: #0e6fda!important; cursor: pointer; }

.page { padding: 50px 0 100px }
.side-menu { position: absolute; z-index: 1; right: 0; top: 0; }
.side-menu ul li { display: inline-block; }
.side-menu ul li a { padding: 0 20px; }
.side-menu ul li.active>a { color: #0e6fda; font-weight: 600; }
.side-menu ul li ul { display: none; }

.page-sidemenu .side-menu { position: static; background-color: #fff; padding: 20px 20px 30px; border-radius: 2px; border: 1px solid #eaeaea; }
.page-sidemenu .side-menu > ul > li { display: block; border-bottom: 1px dashed #eaeaea; padding: 15px 0; }
.page-sidemenu .side-menu > ul > li > a { display: block; }
.page-sidemenu .side-menu > ul > li.active > a { color: #0e6fda; font-weight: 600; }
.page-sidemenu .side-menu > ul > li ul { display: none; padding: 5px 0 0 20px; }
.page-sidemenu .side-menu > ul > li.active > ul { display: block; }
.page-sidemenu .side-menu > ul > li ul li { padding: 5px 0; }
.page-sidemenu .side-menu > ul > li ul li.active > a { color: #0e6fda; font-weight: 600; }
.page-sidemenu .side-menu > ul > li.active > ul > li.active > ul { display: block; }

.page-tit { position: relative; font-size: 20px; font-weight: 700; margin-bottom: 40px; }
.page-tit::after { position: absolute; content: ""; width: 40px; height: 3px; background-color: #0e6fda; left: 0; bottom: -15px; }
.page-content { line-height: 30px; }
.page-content img { max-width: 100%; }

/* page advantage point */
.advantage-point,
.produce-point { padding-bottom: 45px; border-bottom: 1px dashed #eee; margin-bottom: 30px; }
.point-title { font-size: 18px; color: #333; font-weight: 700; margin-bottom: 8px; }
.point-title span { font-size: 13px; color: #aaa; font-weight: normal; padding-left: 20px; }
.point-desc { font-size: 15px; color: #666; margin-bottom: 10px; }
.point-thumb img { max-width: 100%; }

/* page service point */
.service-point { text-align: center; padding-bottom: 45px; border-bottom: 1px dashed #ddd; margin-bottom: 15px; }
.service-point img { width: 80px; }
.service-point p.s-title { font-size: 18px; color: #333; margin: 20px 0 10px; }
.service-point p.s-desc { font-size: 15px; color: #666; }

/* newslist */
.news-list { width: 100%; }
.news-item { position: relative; padding: 20px 0; display: flex; border-bottom: 1px solid #eee; }
.news-item .news-info { flex: 1; padding-left: 27px; transform: translateX(-27px); transition: all .36s ease-in-out; }
.news-item .news-info p.title { font-size: 16px; }
.news-item .news-info p.date { font-size: 14px; color: #999; font-family: Arial; line-height: 30px; }
.news-item .news-info p.description { height: 60px; overflow: hidden; margin-top: 10px; font-size: 13px; color: #999; }
.news-item .news-thumb { width: 200px; margin-left: 30px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; }
.news-item:hover .news-info { transform: translateX(-17px) }
.news-item:hover .news-info p.title { color: #0e6fda; }

/* zoom item */
.zoom-thumb { overflow: hidden; }
.zoom-thumb img { display: block; max-width: 100%; transition: all .4s linear; }
.zoom-txt { position: absolute; z-index: 1; left: 15px; bottom: 15px; width: calc(100% - 70px); padding: 10px 20px; font-size: 16px; color: #fff; text-align: center; background-color: rgba(0,0,0,.6); transition: all .4s linear; }
.zoom-item:hover img { transform:scale(1.2); }
.zoom-item:hover .zoom-txt { background-color: rgba(14,84,214,.7); }

/* show product */
.show-pro-con { padding: 60px 0; min-height: 560px; _height: 560px; }
.show-pro-title { font-size: 24px; text-align: center; margin: 10px 0 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.show-pro-con img { max-width: 100%; }

/* show */
.show-title { font-size: 24px; font-weight: 600; margin: 15px 0; text-align: center; }
.show-para { color: #ccc; margin-bottom: 10px; text-align: center; }
.show-content { padding: 15px 0; line-height: 30px; }
.show-content img { max-width: 100%; }

/* pagination */
.pagination { clear: both; margin-top: 30px; }
.report-list+.pagination { margin-top: 0; }
.pagination li { display: inline-block; margin: 0 5px; }
.pagination li a,
.pagination li span { display: inline-block;  line-height: 30px; padding: 2px 15px; background-color: #f7f7f7; border-radius: 3px; }
.pagination li a:hover { color: #0e6fda; }
.pagination li.active span { background-color: #0e6fda; color: #fff; }

/* home-footer */
.home-footer { display: flex; height: 100px; line-height: 100px; padding: 0 60px; background-color: #222; }
.home-copyright {}
.home-copyright p { color: #bfbfbf; }
.home-foot-menu { margin: 0 auto; }
.home-foot-menu ul li { position: relative; display: inline-block; padding: 0 15px; }
.home-foot-menu ul li:first-child { display: none; }
.home-foot-menu ul li:after { content: ''; position: absolute; z-index: 1; top: 43px; left: -1px; display: block; width: 2px; height: 14px; background-color: #bfbfbf; }
.home-foot-menu ul li:nth-child(2):after { display: none; }
.home-foot-menu ul li a { color: #bfbfbf; }
.home-foot-menu ul li ul { display: none; }
.home-foot-qrcode { text-align: right; }
.home-foot-qrcode p { display: inline-block; color: #bfbfbf; }
.home-foot-qrcode img { display: inline-block; width: 80px; height: 80px; padding-left: 25px;vertical-align: middle; }

/* common footer */
.footer { width: 100%; padding: 10px 0; background-color: #222; }
.foot-menu-copyright { position: absolute; z-index: 1; top: 0; left: 0; line-height: 30px; padding: 10px 0; }
.foot-menu-copyright ul { margin-left: -15px; }
.foot-menu-copyright ul li { position: relative; display: inline-block; padding: 0 15px; }
.foot-menu-copyright ul li:after { content: ''; position: absolute; z-index: 1; top: 8px; left: -1px; display: block; width: 2px; height: 14px; background-color: #bfbfbf; }
.foot-menu-copyright ul li:first-child:after { display: none; }
.foot-menu-copyright ul li a { color: #bfbfbf; }
.foot-menu-copyright ul li ul { display: none; }
.foot-menu-copyright p.copyright { color: #bfbfbf; }
.foot-qrcode { text-align: right; }
.foot-qrcode p { display: inline-block; color: #bfbfbf; line-height: 80px; }
.foot-qrcode img { display: inline-block; width: 80px; height: 80px; padding-left: 25px; vertical-align: middle; }

.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive .layui-table th,
.table-responsive .layui-table td { white-space: nowrap; }