<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* CSS Document */
body{  }
.container{width: 100%; height:100%;  box-sizing: border-box; padding-left:336px;}
/*.header{ width:100%; box-sizing: border-box; padding:15px 20px; position: relative;  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; z-index: 1200; background-color:#1b3271; display: none;animation: fadeInDown 0.5s ease-in-out; -webkit-animation: fadeInDown 0.5s ease-in-out;}
.header &gt; .logo{ display: block; width: 160px; }
.header &gt; .logo &gt; img{ width: 100%; }
.btnMenu,.search{ width:24px; z-index: 1000;}
.btnMenu{ width: 80px;  background-color: rgba(255,255,255,0.01);}
.btnMenu &gt; img,.search &gt; img{ width:100%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.search{  margin-left: 56px; }
.search &gt; img:nth-of-type(1){ display: block; }
.search &gt; img:nth-of-type(2){ display: none; }
.sechActive &gt; img:nth-of-type(2){ display: block; }
.sechActive &gt; img:nth-of-type(1){ display: none; }*/

.aside{  width:336px; z-index: 1600; height: 100%; background-color: #1b3271;  display: flex; box-sizing: border-box;  flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;  position: fixed; left:0;top:0;}
.aside &gt; .logo{ display: block; width: 100%; box-sizing: border-box; padding:15% 25%; flex-shrink: 0; }
.aside &gt; .logo &gt; img{ width: 100%; }
.asideScroll{ width: 100%; height: 100%; box-sizing: border-box; padding:3% 0; position: relative;}


.asideOnline{ width: 100%; box-sizing: border-box; padding:5%; flex-shrink: 0;  position: absolute; left:0; bottom:0; margin-top: 15%;}
.asideOnline &gt; .QRcode{ width: 100%; color: #FFF }
.asideOnline &gt; .QRcode &gt; p{ width: 30%;margin:0 auto; overflow: hidden; }
.asideOnline &gt; .QRcode &gt; p &gt; img{ width: 100%; }
.asideOnline &gt; .QRcode &gt; h3{ font-weight: 550; line-height: 3; text-transform: uppercase; font-size: 14px;text-align: center; text-decoration: underline; }
.asideOnline &gt; .olCopyright{ width: 100%; line-height: 1.6; font-size: 14px; color: rgba(255,255,255,0.4); text-align: center; margin-top: 3%;}
.asideOnline &gt; .olCopyright a{color: rgba(255,255,255,0.4);}

.main{ width: 100%;  height: auto;  overflow: hidden;}
.banner{ width: 100%; overflow: hidden; position: relative; }
.banner &gt; img{ width: 100%; }
.banner &gt; div{ width: 100%; height: 100%; position: absolute; left:0; top:0; box-sizing: border-box; padding:5%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; }
.banner &gt; div &gt; h3,.banner &gt; div &gt; p{ width: 100%; color: rgba(255,255,255,0.8); text-transform: uppercase; line-height: 1.6; }
.banner &gt; div &gt; h3{ font-family: 'Impact'; font-weight: bold; font-size: 50px; }
.banner &gt; div &gt; p{ font-size: 32px; }
.colDJHot{ width: 100%; }
.djHotTab{ width: 100%; box-sizing: border-box; padding:5% 6% 0 6%; text-align: left; }
.djHotTab &gt; p{ display: inline-block; font-size: 20px; line-height:3; padding:0 5%; color: #333; cursor: pointer; background-color: #f5f5f5; margin-right: 2%;  }
.djHotTab &gt; p a{display: inline-block; color: #333;  }
.djHotTab &gt; p.active{ background-color: rgba(201,4,0,1); color: #FFF; }
.djHotTab &gt; p.active a{color: #FFF; }
.djHotTab &gt; p.active a:hover{color: #FFF; }
.djHotMain{ width: 100%; box-sizing: border-box; padding:5% 6%; position: relative;}
.djHotMain::before{ content: ' '; width:100%; background-color: #f9f9f9; height: 60%; position: absolute; left:0; bottom:0; z-index: 310; }
.djHotMain &gt; .djHotItem{ width: 100%; display: none; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; position: relative; z-index: 360; box-sizing: border-box; padding-right:3%;}
.djhi-left{ width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; box-sizing: border-box; padding-right:4%; padding-left:3%;animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.djHotMain &gt; .djHotItem:nth-of-type(2){ display: none !important; }
.djHotMain &gt; .djHotItem:nth-of-type(3){ display: none !important; }
.djhi-header{ width: 100%; font-weight: 550; color: #ededed; font-size: 90px; text-transform: uppercase; text-align: left; flex-shrink: 0; margin-bottom: 8%; }
.djhi-about{ width: 100%; flex: 1; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; }
.djhi-about &gt; h4,.djhi-about &gt; h3,.djhi-about &gt; div,.djhi-about &gt; p{ width: 100%; font-weight: normal; font-size: 20px; line-height: 1.8; text-align: left;}
.djhi-about &gt; h4{ color: #c90400; order:1;}
.djhi-about &gt; h3{ order:2; }
.djhi-about &gt; div{ font-size: 16px; line-height: 2;margin-top: 3%; margin-bottom: 3%; color: #999; order:3;}
.djhi-about &gt; p{ font-size: 16px; text-align: left; order:4;}
.djhi-about &gt; p &gt; a{ display: inline-block; padding:0 5%; line-height: 2.5; background-color: rgba(201,4,9,1); color: #FFF !important; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.djhi-about &gt; p &gt; a:hover{ background-color: rgba(201,4,9,0.8) }
.djhi-img{ width: 48%; overflow: hidden; display: block; flex-shrink: 0;animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out;}
.djhi-img &gt; img{ width: 100%; }
.colDJList{ width: 100%; box-sizing: border-box; padding:5% 9% 5% 8%; }
.colDJList &gt; ul &gt; li{ width: 100%; box-sizing: border-box; padding-top: 2%; padding-bottom: 2%; border-bottom: 1px solid #d2d2d2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; }
.colDJList &gt; ul &gt; li:nth-of-type(1){ border-top: 1px solid #d2d2d2; }
.djItem-img{ display: block; width: 200px; overflow: hidden; flex-shrink: 0; }
.djItem-img &gt; img{ width: 100%; }
.djItem-about{ width: 100%; box-sizing: border-box; padding:0 15% 0 3%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start;}
.djItem-about &gt; h3,.djItem-about &gt; p,.djItem-about &gt; h4{ width: 100%; font-weight: normal; line-height: 1.6; text-align: left; font-size: 18px;}
.djItem-about &gt; p{ height: auto; max-height: 48px; overflow: hidden; line-height: 24px; font-size: 14px; color: #999; }
.djItem-about &gt; h4{ height: 24px; line-height: 24px; color: #999; font-size: 14px; margin-top: 5px; display: none; }
.djItem-aside{ flex-shrink: 0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end;}
.djItem-aside &gt; div{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.djItem-aside &gt; div &gt; p{ height: 2px; width: 30px;  margin-right:20px; background-color: #ededed }
.djItem-aside &gt; div &gt; h3{ height: 30px; line-height: 30px; font-weight: normal; font-size: 15px; }
.djItem-aside &gt; a{ display: block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; background-color: rgba(201,4,0,1); color: #FFF !important; text-align: center; margin-top: 5%;}
.djItem-aside &gt; a &gt; i{ font-size: 12px; }
.resultForm{ width: 100%; box-sizing: border-box; padding:0 9% 0 8%; margin-top: 5%; }
.resultForm &gt; section{ height: auto; background-color: #f7f7f7; padding-top: 10px; padding-bottom: 10px;}
.resultForm &gt; section &gt; div{ width: 36%; height: 42px; box-sizing: border-box; border:1px solid #dcdcdc; background-color: #FFF;margin:0 auto; display: flex; padding-left:10px; background-color: #FFF;}
.resultForm &gt; section &gt; div &gt; p:nth-of-type(1){ width: 100%; height: 40px; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.resultForm &gt; section &gt; div &gt; p:nth-of-type(1) &gt; input{ width: 100%; height: 40px; border:0; color: #FFF; background-color: transparent; font-size: 14px; }
.resultForm &gt; section &gt; div &gt; p:nth-of-type(2){ width:60px; height: 40px; flex-shrink: 0; animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out; box-sizing: border-box; border-left:1px solid #dcdcdc;}
.resultForm &gt; section &gt; div &gt; p:nth-of-type(2) &gt; input{ width: 100%; height: 40px; border:0; background-color: transparent; color: #2968ab; font-size: 20px; font-family:"iconfont" !important; }

.pages{ width: 100%; text-align: center; padding-bottom: 6%; }
.pages  li{display: inline-block;font-size: 16px;margin-top: 10px;}
.pages  li a{ display: inline-block; margin:0 5px; padding:0 10px; height: 30px; line-height: 30px; line-height: 30px;color: #333;}
.pages  li a:hover,.pages  li.active{ background-color: #00a0e9; color: #FFF !important; }
.djPages li:hover,.djPages li.active{background-color: rgba(201,4,0,1);}

/*.footer{ width: 100%; box-sizing: border-box; padding:10px; background-color: #f2f1f9; display: none;animation: fadeInUp 0.5s ease-in-out; -webkit-animation: fadeInUp 0.5s ease-in-out;}
.footer section,.footer aside{ width: 100%; font-size: 14px; line-height: 24px; text-align: center; color: #333;}
.footer section{ color: #999; }
.float{ position: fixed; width: 200px; left:0; top:0; z-index: 1600; height: 100%; background-color: #1b3271;  display: none; box-sizing: border-box; padding:20px; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.float .close{ display: inline-block; background-color: rgba(255,255,255,0.01); color: rgba(255,255,255,0.8) !important; width: 100%; text-align: left; z-index: 1000; height: 50px; background-image: url(../images/btn-close.png); background-repeat: no-repeat; background-position: left center; background-size: 32px auto;}
.float .close &gt; i{ font-size: 24px; display: inline-block; display: none;}
.menu,.menu &gt; ul{ width: 100%;  }
.menu &gt; ul{ margin-top: 8%; }
.menu &gt; ul &gt; li{ width: 100%; }
.menu &gt; ul &gt; li &gt; a{display: flex; padding-top: 6%; padding-bottom: 6%; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; color: rgba(255,255,255,0.4);transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.menu &gt; ul &gt; li &gt; a:hover{ color: #FFF !important; }
.menu &gt; ul &gt; li &gt; div{ width: 100%; display: none; }
.menu &gt; ul &gt; li &gt; div &gt; a{display: flex; width: 100%; height: auto; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;  color: rgba(255,255,255,0.4); }
.menu &gt; ul &gt; li &gt; div &gt; a &gt; p{ margin-right: 6%;width:0; overflow: hidden; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; display: none;animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.menu &gt; ul &gt; li  &gt; div &gt; a &gt; h3{ font-weight: normal; font-size: 12px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; line-height: 2;animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out; }
.menu &gt; ul &gt; li.active &gt; a{ color: rgba(255,255,255,1) !important; background-color: rgba(25,79,165,1); }
.menu &gt; ul &gt; li &gt; div &gt; a:hover,.menu &gt; ul &gt; li &gt; div &gt; a.active{ color: rgba(255,255,255,1) !important;  }
.menu &gt; ul &gt; li &gt; div &gt; a:hover &gt; p,.menu &gt; ul &gt; li &gt; div &gt; a.active &gt; p{ width:auto; display: block;}
.menu &gt; ul &gt; li.active &gt; a &gt; h3{ animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out;}
.menu &gt; ul &gt; li.active &gt; div{ display: block; }
.online{ width: 100%; }
.online &gt; .QRcode{ width: 100%; color: #FFF }
.online &gt; .QRcode &gt; p{ width: 30%;margin:0 auto; overflow: hidden; }
.online &gt; .QRcode &gt; p &gt; img{ width: 100%; }
.online &gt; .QRcode &gt; h3{ font-weight: 550; line-height: 3; text-transform: uppercase; font-size: 12px;text-align: center; text-decoration: underline; }
.online &gt; .olCopyright{ width: 100%; line-height: 1.6; font-size: 12px; color: rgba(255,255,255,0.4); text-align: center; margin-top: 3%;}

.box{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: fixed; left:0; top:0; z-index: 1120; display: none; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;}
.box .header{ position: fixed; background-color: transparent;justify-content: flex-end; }
.box .menu{ position: absolute; margin-top: -1.4%; top:50%; right: 6%; }
.searchForm{ width: 60%; padding:10px 0 10px 10px; box-sizing: border-box; border-bottom:1px solid #FFF; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; animation: fadeIn 0.5s ease-in-out; -webkit-animation: fadeIn 0.5s ease-in-out; }
.searchForm &gt; p:nth-of-type(1){ width: 100%; height: 30px; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.searchForm &gt; p:nth-of-type(1) &gt; input{ width: 100%; height: 30px; border:0; color: #FFF; background-color: transparent; font-size: 14px; }
.searchForm &gt; p:nth-of-type(2){ width:80px; height: 30px; flex-shrink: 0; animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out;}
.searchForm &gt; p:nth-of-type(2) &gt; input{ width: 100%; height: 30px; border:0; background-color: transparent; color: #FFF; font-size: 14px; }*/
.colDown{  width: 90%; background-color:#FFF; box-sizing: border-box; margin:0 auto; padding:2% 4%;}
.downList{ width:100%; margin-bottom: 5%; }
.downList &gt; ul &gt; li{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top:1.5%; padding-bottom: 1.5%; border-bottom: 1px solid #f3f3f3;}
.downList &gt; ul &gt; li &gt; a{ display: block; font-size: 18px; line-height: 24px; text-align: left; }
.downList &gt; ul &gt; li &gt; span{ font-size: 14px; color: #999; line-height: 24px; flex-shrink: 0; margin-left:3%; align-self: flex-start;}
/*******/
.newsHotTab &gt; p.active,.busiHotTab &gt; p.active{ background-color: rgba(25,79,165,1); }
.busiHotTab &gt; p &gt; a{ color: #333 !important; }
.busiHotTab &gt; p.active &gt; a{ color: #FFF !important; }
.djhi-about &gt; h4.newsHotDate{ color: rgba(25,79,165,1);}
.djhi-about &gt; p &gt; a.newsHotMore{ background-color: rgba(25,79,165,1); }
.djhi-about &gt; p &gt; a.newsHotMore:hover{ background-color: rgba(25,79,165,0.8); }
.busiMain,.busiMain &gt; .busiItem{ width:100%;}
.busiMain &gt; .busiItem &gt; .bi-header{ width: 100%; box-sizing: border-box; padding-top:3%; padding-right:6%; padding-bottom:2%; padding-left:6%;  }
.busiMain &gt; .busiItem &gt; .bi-header &gt; h3,.busiMain &gt; .busiItem &gt; .bi-header &gt; p{ width: 100%; font-weight: 550; font-size: 42px; text-align: left; text-transform: uppercase; line-height: 1.6; color: #ededed; box-sizing: border-box; padding-left:3%;}
.busiMain &gt; .busiItem &gt; .bi-header &gt; h3{animation: fadeInDown 0.5s ease-in-out; -webkit-animation: fadeInDown 0.5s ease-in-out;}
.busiMain &gt; .busiItem &gt; .bi-header &gt; p{ color: #333; animation: fadeInUp 0.5s ease-in-out; -webkit-animation: fadeInUp 0.5s ease-in-out;}
.busiMain &gt; .busiItem &gt; .bi-about,.servMain,.jobAside{ width: 100%; box-sizing: border-box; padding-top:3%; padding-right:6%; padding-bottom:3%; padding-left:6%; background-color: #f9f9f9; }
.busiMain &gt; .busiItem &gt; .bi-about &gt; section{ width:100%; height: auto;  }
.biAboutF1{ width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: stretch; }
.biAboutF1 &gt; .baF1-img{ width: 50%; overflow: hidden; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.biAboutF1 &gt; .baF1-img &gt; img{ width: 100%; }
.biAboutF1 &gt; .baF1-right{ width: 50%; box-sizing: border-box; padding-left:2%; font-size: 16px; height: 480px; line-height: 32px; overflow: hidden;  text-align: left; animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out; }
.baF2-img{ width: 100%; overflow: hidden; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.baF2-img &gt; img{ width: 100%; }
.baF2-right{ width: 100%; padding:2%; box-sizing: border-box; line-height: 2; font-size: 16px; text-align: left;animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out;}

.biAboutF3{ width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; }
.biAboutF3 &gt; .baF3-img{ width: 60%; position: relative;animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out;}
.servSearch{ width:100%;  overflow: hidden;}
.servSearch &gt; img{ width: 100%; }
.biAboutF3 &gt; .baF3-img &gt; div{ width: 23%; height: 0; padding-top: 33.0%; position: absolute; left:-11.5%; bottom: 0; animation: fadeInUp 0.5s ease-in-out; -webkit-animation: fadeInUp 0.5s ease-in-out;}
.biAboutF3 &gt; .baF3-img &gt; div &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; }
.biAboutF3 &gt; .baF3-right{ width: 40%; box-sizing: border-box; padding-right:10%; padding-top: 5%; padding-left:3%; font-size: 16px; height: auto; line-height: 2; overflow: hidden;  text-align: left; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out; }

.biAboutF4{ width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: stretch; }
.biAboutF4 &gt; .baF4-img{ width: 50%;position: relative; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.biAboutF3 &gt; .baF3-img &gt; p{ width:100%;  overflow: hidden;}
.biAboutF4 &gt; .baF4-img &gt; p &gt; img{ width: 100%; }
.biAboutF4 &gt; .baF4-img &gt; div{ width: 23%; height: 0; padding-top: 33.0%; position: absolute; right:-11.5%; bottom: 0;animation: fadeInUp 0.5s ease-in-out; -webkit-animation: fadeInUp 0.5s ease-in-out; }
.biAboutF4 &gt; .baF4-img &gt; div &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; }
.biAboutF4 &gt; .baF4-right{ width: 50%; box-sizing: border-box; padding-right: 3%; padding-top: 5%; padding-left: 10%; font-size: 16px; height: auto; line-height: 2; overflow: hidden;  text-align: left; animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out; }
/********/
.servSearch{ width:100%;  overflow: hidden; position: relative;}
.servSearch &gt; img{ width: 100%; }
.servSearch &gt; .servSearchMain,.servQA-header{ width: 100%; height: 100%; position: absolute; left:0; top:0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-self: center; box-sizing: border-box; padding:3%; }
.servSearch &gt; .servSearchMain &gt; h3,.servQA-header &gt; h3{ font-weight: 550;  display: inline-block; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-self: center; /**/ }
.servSearch &gt; .servSearchMain &gt; h3 &gt; p,.servQA-header &gt; h3 &gt; p{ font-size: 26px; line-height: 2.5; position: relative; border-bottom: 1px solid #CCC; position: relative;}
.servSearch &gt; .servSearchMain &gt; h3 &gt; p::after,.servQA-header &gt; h3 &gt; p::after{ content: ' '; width: 30%; height: 2px; background-color: #194fa5; position: absolute; left:50%; bottom:-2px; margin-left:-15%; }
.servSearch &gt; .servSearchMain &gt; p,.servQA-header &gt; p{ width: 100%; text-align: center; line-height: 2; text-transform: uppercase; color: #999; font-size: 16px; margin-top: 0.6%; }
.servQA{ width: 100%; margin-bottom: 5%; }
.servQA &gt; .servQA-header{ position: initial; display:none;}
.qaMain{ width: 100%; box-sizing: border-box; padding:30px 10px 30px 30px; background-color: #ccdaea; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-self: flex-start;  }
.qaList{ width: 100%; box-sizing: border-box; padding:3%; background-color: #FFF; height: auto; }
.qaList &gt; ul &gt; li{ width: 100%; margin-bottom: 2%; }
.qaList &gt; ul &gt; li &gt; .qaItem-title{ width: 100%; line-height: 1.5; font-size: 16px; text-align: left; margin-bottom: 20px;}
.qaList &gt; ul &gt; li &gt; .qaItem-title &gt; i{ color: #1593d3; font-size: 16px; }
.qaList &gt; ul &gt; li &gt; .qaItem-answer{ width: 100%; box-sizing: border-box; border:1px solid #dcdcdc; background-color: #f7f7f7; padding:2%; line-height: 24px; font-size: 14px; text-align: left; position: relative;}
.qaList &gt; ul &gt; li &gt; .qaItem-answer::before{ content: ' '; width:0; height: 0; position: absolute; left:10px; top:-14px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 14px solid #dcdcdc;}
.qaList &gt; ul &gt; li &gt; .qaItem-answer::after{ content: ' '; width:0; height: 0; position: absolute; left:10px; top:-13px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 14px solid #f7f7f7;}
.qaLoadMore{ width: 100%; display: block; box-sizing: border-box; background-color: #f7f7f7; border:1px solid #dcdcdc; font-size: 18px; text-align: center; line-height: 3; color: #333 !important; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.qaLoadMore:hover{ background-color: #1b3271; border:1px solid #1b3271;  color: #FFF !important;}
.qaIcon{ width: 200px; overflow: hidden; margin-left:-10px; align-self: flex-end; flex-shrink: 0; }
.qaIcon &gt; img{ width:100%; }
.servOnline{ width:100%; }
.servOnline::after{ content: ' '; display: block; clear: both; }
.servOnline &gt; ul &gt; li{ width: 50%; float: left; overflow: hidden;  background-color: #84ca2e;transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.servOnline &gt; ul &gt; li:nth-of-type(2){background-color: #a78f7e}
.servOnline &gt; ul &gt; li &gt; .soItem-img{ width: 100%; height: 0; padding-top: 70%; position: relative; overflow: hidden; }
.servOnline &gt; ul &gt; li &gt; .soItem-img &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.servOnline &gt; ul &gt; li &gt; .soItem-about{ width: 100%; box-sizing: border-box; padding:3% 5%; color: #FFF; text-align: left;}
.servOnline &gt; ul &gt; li &gt; .soItem-about &gt; h3,.servOnline &gt; ul &gt; li &gt; .soItem-about &gt; div,.servOnline &gt; ul &gt; li &gt; .soItem-about &gt; h4,.servOnline &gt; ul &gt; li &gt; .soItem-about &gt; p{ width: 100%; line-height: 30px; height: 30px; font-size: 24px; font-weight: normal; line-height: 30px; overflow: hidden; }
.servOnline &gt; ul &gt; li &gt; .soItem-about &gt; div{ font-size: 14px;  }
.servOnline &gt; ul &gt; li &gt; .soItem-about &gt; h4{ font-size: 22px; font-weight: 550; }
.servOnline &gt; ul &gt; li &gt; .soItem-about &gt; p{ text-align: left; margin-top: 10px;}
.servOnline &gt; ul &gt; li &gt; .soItem-about &gt; p &gt; a{ width: 80px; height: 30px; line-height: 30px; display: block; font-size: 14px; background-color: #FFF; border-radius: 2px; color: #333 !important; text-align: center;}
.servOnline &gt; ul &gt; li:hover &gt; .soItem-img &gt; img{ transform: scale(1.05); -webkit-transform: scale(1.05); }
.servOnline &gt; ul &gt; li:hover{  background-color:#1b3271;}
/*******/
.banner &gt; div.bannerJob{ height: auto; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding:3%;}
.banner &gt; div.bannerJob &gt; a{ display: block; width: 25%;}
.banner &gt; div.bannerJob &gt; a &gt; img{ width: 100%; }
.banner &gt; div.bannerJob &gt; p{ width:auto; flex-shrink: 0; padding:0 50px; }
.jobAside{  display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: space-between; align-self: center;padding-bottom:0%; }
.jobOnline{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.jobOnline &gt; p{ width: 120px; overflow: hidden; flex-shrink: 0; margin-right: 10px; }
.jobOnline &gt; p &gt; img{ width: 100%; }
.jobOnline &gt; h3{ width: 160px; font-weight: normal; font-size: 14px; line-height: 30px; text-align: left; color: #999; }
.jobTool{  }
.jobTool &gt; ul &gt; li{ float: left; margin-left:10px; }
.jobTool &gt; ul &gt; li &gt; a{ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; box-sizing: border-box; height: 120px; box-sizing: border-box; padding:0 60px; border-radius: 4px; background-color: #97c355;  color: #FFF !important;transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.jobTool &gt; ul &gt; li:nth-of-type(2) &gt; a{ background-color: #1a82d2; }
.jobTool &gt; ul &gt; li &gt; a &gt; p{ width: 80px; margin:0 auto; box-sizing: border-box; padding:0 10px;}
.jobTool &gt; ul &gt; li &gt; a &gt; p img{ width: 100%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.jobTool &gt; ul &gt; li &gt; a &gt; h3{ font-weight: normal; font-size: 16px;}
.jobTool &gt; ul &gt; li &gt; a:hover{ border-radius: 12px; transform: translateY(-10px); -webkit-transform: translateY(-10px);}
.jobTool &gt; ul &gt; li &gt; a:hover &gt; p img{ transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); }
.jobTool &gt; ul &gt; li &gt; a:hover &gt; h3{ font-weight: 550; }
/*******/
.joinAbout,.joinActive{ width: 100%; box-sizing: border-box; padding:8% 9% 8% 8%; background-image: url(../images/emp-22.png); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; }
.JAMain{ width: 100%; height: auto; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-self: stretch; }
.JAMain &gt; .JAAbout{ width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-self: flex-start; }
.JAMain &gt; .JAAbout &gt; h3{ width: 100%; text-align: left; color: #5581fd; font-weight: 550; font-size: 42px; }
.JAMain &gt; .JAAbout &gt; div{ width: 100%; font-size: 16px; line-height: 24px; margin-top: 3%; }
.JAMain &gt; .JAItem{ width: 22%; margin-left:2%; background-color: #f2f2f2; flex-shrink: 0;transition: all 0.5s linear; -webkit-transition: all 0.5s linear; cursor: pointer;}
.JAMain &gt; .JAItem &gt; .JAItemImg{ width: 100%; height: 0; padding-top: 66.7%;position: relative; overflow: hidden; }
.JAMain &gt; .JAItem &gt; .JAItemImg img{ width: 100%; height: 100%; position: absolute; left:0;top:0;  transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.JAMain &gt; .JAItem &gt; .JAItemAbout{ width: 100%;box-sizing: border-box; padding: 5%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; background-image: url(../images/icon-logo.png); background-repeat: no-repeat; background-position: right bottom; background-size: 40% auto;}
.JAMain &gt; .JAItem &gt; .JAItemAbout &gt; h3{ font-weight: 550; font-size: 18px; height: 30px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;text-align: left; }
.JAMain &gt; .JAItem &gt; .JAItemAbout &gt; h3 &gt; a{ color: #194fa5 !important;transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.JAMain &gt; .JAItem &gt; .JAItemAbout &gt; div{ width: 100%; height: 144px; line-height: 24px; text-align: left; font-size: 14px; overflow: hidden; }
.JAMain &gt; .JAItem:hover{ background-color: #194fa5; }
.JAMain &gt; .JAItem:hover &gt; .JAItemImg img{ transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); }
.JAMain &gt; .JAItem:hover &gt; .JAItemAbout,.JAMain &gt; .JAItem:hover &gt; .JAItemAbout &gt; h3 &gt; a{ color: #FFF !important; }
.JAActive-header{ width: 100%; padding-top: 2%; padding-bottom: 2%; text-align: center; font-size: 28px; color: #194fa5; font-weight: 550; }
.joinActive{ background-color: #f2f2f2; background-image: url(none); padding-top: 3%;padding-bottom: 3%; }
.joinFlash{ width:100%; position: relative; overflow: hidden; }
.swiper2{ width: 100% !important; padding-bottom: 40px;}
.swiper2 .swiper-pagination { display:inline-block;  padding-top:2%; padding-bottom:10px; bottom:0; text-align:center; padding-right:10px; box-sizing:border-box; width:100%;  }
.swiper2 .swiper-pagination-bullet{opacity:1; margin:0 5px!important; width:10px; height:10px; border-radius:5px; box-sizing:border-box; border:0px solid rgba(255,255,255,0.6); background-color: rgba(255,255,255,1); position: relative;}
.swiper2 .swiper-pagination-bullet-active{width:20px; background-color:rgba(85,129,253,1); border:0px solid rgba(255,255,255,1);}
.swiper2 .swiper-slide{ position:relative; overflow: hidden; width: 100%; color: #FFF !important;  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch;}
.swiper2 .swiper-slide &gt; p{ width:70%; overflow: hidden; height: 0; padding-top: 30%; flex-shrink: 0; position: relative; }
.swiper2 .swiper-slide &gt; p img{width: 100%; height: 100%; position: absolute; left:0; top:0; }
.swiper2 .swiper-slide &gt; div{ width:100%;  background-color: #194fa5; box-sizing: border-box; padding:2%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-start;}
.swiper2 .swiper-slide &gt; div &gt; h3,.swiper2 .swiper-slide &gt; div &gt; p{ width: 100%; font-weight: normal; font-size: 42px; text-align: left; line-height: 1.6;}
.swiper2 .swiper-slide &gt; div &gt; h3 &gt; a{ color: #FFF !important; }
.swiper2 .swiper-slide &gt; div &gt; p{ font-size: 14px; line-height: 2.2;}
.swiper2 .swiper-button-next,.swiper2 .swiper-button-prev{ color:rgba(255,255,255,0.2); background-color:rgba(0,0,0,0.1); border-radius:0%; height:40px; width:30px; line-height:40px; text-align:center; background-image:url(none); cursor:pointer; margin-top:-20px; box-sizing:border-box; display: none; } 
.swiper2 .swiper-button-next:hover,.swiper2 .swiper-button-prev:hover{ color:rgba(237,31,36,1) !important; } 
.swiper2 .swiper-button-next i,.swiper2 .swiper-button-prev i{ font-size:1.0rem; }
/*******/
.spiritList{ width: 100%; height: auto; }
.spiritList &gt; ul &gt; li{ float: left; width: 23.5%; margin-right: 2%; position: relative; }
.spiritList &gt; ul &gt; li:nth-of-type(4n){ margin-right: 0; }
.spiritList &gt; ul &gt; li &gt; div{ width: 100%; height: 100%; box-sizing: border-box; padding:12%; position: absolute; left:0; top:0;background-image: url(../images/cultureItem.png); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%;animation: spin 25s infinite linear; -webkit-animation: spin 25s infinite linear; display: none; }
.spiritList &gt; ul &gt; li &gt; div &gt; img{ width: 100%; opacity: 0;  }
.spiritList &gt; ul &gt; li &gt; p{ width: 100%; box-sizing: border-box; padding:12%;  position: relative;}
.spiritList &gt; ul &gt; li &gt; p::before{ content: ' '; width:0; height: 0; position: absolute; left:50%; margin-left:-10px; bottom:0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 14px solid #93edfc; display: none;}
.spiritList &gt; ul &gt; li &gt; p::after{ content: ' '; width:0; height: 0; position: absolute; left:50%; margin-left:-10px; bottom:-1px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 14px solid #eaeffc; display: none;}
.spiritList &gt; ul &gt; li.active &gt; div{ display: block; }
.spiritList &gt; ul &gt; li.active &gt; p{ }
.spiritList &gt; ul &gt; li.active &gt; p::before,.spiritList &gt; ul &gt; li.active &gt; p::after{ display: block; }
.spiritList &gt; ul &gt; li &gt; p &gt; img{ width: 100%; }
.spiritList &gt; ul &gt; li &gt; h3{ display: none;}
.spiritAbout{ width: 100%; box-sizing: border-box; padding:3%; border:1px solid #93edfc; background-color: #eaeffc; line-height: 2; font-size: 24px; text-align: center; border-radius: 8px; }
.spiritList &gt; ul &gt; li &gt; h3 &gt; span,.spiritAbout &gt; span{ font-weight: 550; }

.cultureList{ width: 100%;display:none; }
.cultureList &gt; ul &gt; li{ width: 32%; float: left; margin-right: 2%; margin-bottom: 1%; margin-top: 1%; }
.cultureList &gt; ul &gt; li:nth-of-type(3n){ margin-right: 0; }
.cultureList &gt; ul &gt; li &gt; a{ display: block; width: 100%; background-color: #FFF; box-sizing: border-box; border:1px solid #EEE; color: #333 !important; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.cultureList &gt; ul &gt; li &gt; a &gt; p{ width: 100%; height: 0; padding-top: 53%; position: relative; overflow: hidden; }
.cultureList &gt; ul &gt; li &gt; a &gt; p img{ width: 100%; height: 100%; position: absolute; left:0; top:0; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.cultureList &gt; ul &gt; li &gt; a &gt; div{ width: 100%; height:auto; padding:3%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;align-items: stretch; box-sizing: border-box; }
.cultureList &gt; ul &gt; li &gt; a &gt; div &gt; h3{ width: 100%; font-weight: normal; font-size: 18px; line-height: 30px; text-align: left; overflow: hidden; height: 30px;  }
.cultureList &gt; ul &gt; li &gt; a &gt; div &gt; p{ font-size: 14px; width: auto; height: 30px; line-height: 30px;text-align: right; overflow: hidden;  flex-shrink: 0; }
.cultureList &gt; ul &gt; li &gt; a:hover{  background-color: #194fa5; color: #FFF !important;}
.cultureList &gt; ul &gt; li &gt; a:hover &gt; p img{ transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); }
/******/
.aboutHistory{ width: 100%; padding-top: 3%; padding-bottom: 3%; }
.aboutHistory &gt; header{ width: 100%; padding-bottom: 8%; position: relative;}
.aboutHistory &gt; header &gt; p{ width: 32px; overflow: hidden; position: absolute; left:36%; top:0; transform: translateX(-14px); -webkit-transform: translateX(-14px); }
.aboutHistory &gt; header &gt; p img{ width: 100%; }
.aboutHistory &gt; header::after{content: ''; width: 1px; height:100%; border-right:1px dashed #333; position: absolute; left: 36%; top:20px; }
.aboutHistory &gt; ul &gt; li{ width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; position: relative; cursor: pointer; }
.aboutHistory &gt; ul &gt; li::after{ content: ''; width: 1px; height:100%; border-right:1px dashed #333; position: absolute; left: 36%; top:0; }
.aboutHistory &gt; ul &gt; li + li{ padding-top: 2%; }
.aboutHistory &gt; ul &gt; li:hover{ background-color: rgba(255,255,255,0.6); }
.aboutHistory &gt; ul &gt; li &gt; .histDate{ width: 36%; flex-shrink: 0;  border-bottom: 1px dashed transparent;box-sizing: border-box;  padding-bottom: 1.5%; font-size: 36px; text-align: right; font-weight: 550; font-family:'Impact'; color: #b1b1b2; margin-right: 30px; padding-right: 30px;  position: relative;}
.aboutHistory &gt; ul &gt; li &gt; .histDate &gt; p{ content:''; width:24px; height: 24px;  border-radius: 50%; position: absolute; right:-12px; top:3%; z-index: 1210;  background-color: #aab8d7; transform: translateX(2px); transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.aboutHistory &gt; ul &gt; li &gt; .histDate &gt; p::before{ content:''; width:12px; height: 12px;  border-radius: 50%; position: absolute; left:50%; top:50%; margin-top: -6px; margin-left:-8px; z-index: 1230;  background-color: #194fa5; transform: translateX(2px);}
.aboutHistory &gt; ul &gt; li:hover &gt; .histDate &gt; p{ width:36px; height: 36px; background-color: #cad5e8; transform: translateX(2px);right:-18px;}

.aboutHistory &gt; ul &gt; li &gt; .histRight{ width: 100%; box-sizing: border-box;  padding-bottom: 1.5%; border-bottom: 1px dashed #999; font-size: 18px; line-height: 2; text-align: left; }
/*****/
.aboutMain,.contactMain{  background-size: 100% auto; background-repeat: no-repeat; background-position:center top; }
.aboutMain &gt; .banner &gt; img,.contactMain &gt; .banner &gt; img{ opacity: 0; }
.aboutCol{ width: 94%; height: auto; margin-top: 10%;  }
.aboutF1,.aboutF4{ width:100%; position: relative;background-color: #FFF;  }
.aboutF1 &gt; img{ width: 100%; }
.aboutF1 &gt; section{ width: 100%; height: 100%; position: absolute; left:0; top:0;  display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; box-sizing: border-box; padding-top: 3.5%; }
.aboutF1 &gt; section &gt; h3{ font-weight: normal; font-size: 36px; line-height: 3; text-align: center; }
.aboutF1 &gt; section &gt; p{ width: 40px; height: 4px; background-color: #e8410d; }
.aboutF1 &gt; section &gt; div{ width: 100%; font-size: 16px; line-height: 2; text-align: center; margin-top: 3%; }
.aboutF2{ width: 100%; background-color: #FFF;}
.aboutF2 &gt; ul &gt; li{ width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; }
.aboutF2 &gt; ul &gt; li:nth-of-type(2n){ flex-direction: row-reverse; }
.aboutF2 &gt; ul &gt; li &gt; p{ width:50%; overflow: hidden; }
.aboutF2 &gt; ul &gt; li &gt; p img{ width: 100%; }
.aboutF2 &gt; ul &gt; li &gt; div{ width: 50%; box-sizing:  border-box; padding:0 5%; font-size: 16px; line-height: 2; align-self: center; text-indent: 2.6rem;}
.aboutF3,.aboutF3r-top{ width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; }
.aboutF3{ padding-top: 5%; position: relative; background-color: #FFF;}
.aboutF3 &gt; .aboutF3-left{ width: 42%; overflow: hidden; flex-shrink: 0;}
.aboutF3 &gt; .aboutF3-left img{ width: 100%; }
.aboutF3 &gt; .aboutF3-right{ width: 100%;display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; }
.aboutF3r-top &gt; p{ width: 50%; overflow: hidden;  }
.aboutF3r-top &gt; p img{ width: 100%; }
.aboutF3r-btm{ width: 60%; overflow: hidden; position: absolute; right:0; bottom:0; box-sizing: border-box; padding-top:0;  box-sizing: border-box; padding-right: 10%;}
.aboutF3r-btm img{ width: 100%; }
.aboutF4{ box-sizing: border-box; padding:5% 8%; text-align: center; font-size: 16px; line-height: 2; text-align: left; background-color: #FFF;}
.aboutF5{ width:100%; background-color: #4f3f92; box-sizing: border-box; padding-left: 6.4%; }
.aboutF5 &gt; .aboutF5Main{ width: 100%; height: auto; display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; }
.aboutF5-img{ width: 55.6%; flex-shrink: 0;  transform: translateY(10%); -webkit-transform: translateY(10%);}
.aboutF5-img img{ width: 100%; }
.aboutF5-about{ width: 100%; color: #FFF; box-sizing: border-box; padding-right: 2.5%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; }
.aboutF5-about &gt; h3{ width: 45%;  }
.aboutF5-about &gt; h3 img{ width: 100%; }
.aboutF5-about &gt; div{ width: 100%; font-size: 16px; line-height: 36px; overflow: hidden; max-height: 324px; margin-top: 4% }
.aboutF6{ width: 100%;box-sizing: border-box; padding-top:10%; padding-bottom: 10%; background-image: url(../images/emp-41.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; background-color: #FFF; }
.aboutF6-honor{ width:80%; margin:0 auto; }
.aboutF6-honor &gt; ul &gt; li{ width:32%; float: left; overflow: hidden; margin-right: 2%; }
.aboutF6-honor &gt; ul &gt; li img{ width: 100%; }
.aboutF6-honor &gt; ul &gt; li:nth-of-type(3n){ margin-right: 0; }
/*****/
.contactMain{ background-image: url(none);}
.contactCol{ margin-top: 0; padding-left:5%;box-sizing: border-box; padding-bottom: 5%; }
.colContact{ width: 100%; background-color: #FFF;  }
.contactHeader{ width: 100%; line-height: 3; font-size: 32px; text-align: center; box-sizing: border-box; border-bottom:1px solid #d1d1d1; color: #194fa5; position: relative;}
.contactHeader::after{ content: ' '; width: 10%; height: 1px; background-color: #194fa5; position: absolute; left:50%; bottom:0; margin-left: -5%; }
.contactList{ width: 100%; }
.contactList &gt; .contactLeft,.contactList &gt; .contactRight{ width: 50%; float: left; height: auto; padding-top: 3%; padding-bottom: 6%; padding-left:5%; padding-right: 3%; box-sizing: border-box;}
.contactList &gt; .contactLeft{animation: fadeIn 1.5s ease-in-out; -webkit-animation: fadeIn 1.5s ease-in-out;}
.contactList &gt; .contactRight{ padding-left:0; padding-right:0; animation: fadeIn 1.5s ease-in-out; -webkit-animation: fadeIn 1.5s ease-in-out;}
.contactList &gt; .contactLeft &gt; h3,.contactList &gt; .contactRight &gt; h3{ width: 100%; font-weight: normal; font-size: 26px; text-align: left; line-height: 1.3; margin-bottom: 3%;}
.contactList &gt; .contactLeft &gt; p,.contactList &gt; .contactRight &gt; h4{ font-weight: normal; width: 100%; font-size: 16px; line-height: 2.5; text-align: left; color: #999;}
.contactList &gt; .contactLeft &gt; p &gt; i,.contactList &gt; .contactRight &gt; h4 &gt; i{ font-size: 20px;  }
.contactList &gt; .contactRight &gt; p{ width:30%; box-sizing: border-box; padding:2%; border:1px solid #EEE; overflow: hidden; margin-top: 10px;}
.contactList &gt; .contactRight &gt; p img{ width: 100%; }
.map{ width: 100%; overflow: hidden; animation: fadeIn 1.5s ease-in-out; -webkit-animation: fadeIn 1.5s ease-in-out;}
.map img{ width: 100%; }


.warterSup-title{width: 78%; margin:0 auto;background-color: rgba(255,255,255,0.5); box-sizing: border-box; padding:1.5% 2%; line-height: 1.6; font-size: 20px; text-align: left; color: #FFF;}
.warterSup-list{ width: 78%; margin:0 auto; box-sizing: border-box; padding-bottom: 10%; }
.warterSup-list &gt; ul &gt; li{ width: 100%; box-sizing: border-box; background-color: #FFF; }
.warterSup-list &gt; ul &gt; li &gt; a{ display: block; width: 100%; box-sizing: border-box; padding:2.5%; margin-top: 2.5%;}
.warterSup-list &gt; ul &gt; li &gt; a:hover{ color: #333 !important; }
.warterSup-list &gt; ul &gt; li &gt; a &gt; h3{ width: 100%; height: auto; line-height: 3; font-size: 24px; box-sizing: border-box; padding:0 2.5%; color: #FFF; text-align: left;background-color: #194fa5; }
.warterSup-list &gt; ul &gt; li &gt; a &gt; .wsItem-about{ width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; margin-top: 2.5%; }
.warterSup-list &gt; ul &gt; li &gt; a &gt; .wsItem-about &gt; div{ width: 54%; box-sizing: border-box; padding-top: 4%; font-size: 18px; line-height: 2; text-align: left; overflow: hidden; position: relative;}
.warterSup-list &gt; ul &gt; li &gt; a &gt; .wsItem-about &gt; div::before{ content: ' '; width: 100%; height: 12%; background-color: #f2f2f2; position: absolute; left:0; top:0; }
.warterSup-list &gt; ul &gt; li &gt; a &gt; .wsItem-about &gt; p{ width: 43%; overflow: hidden; }
.warterSup-list &gt; ul &gt; li &gt; a &gt; .wsItem-about &gt; p &gt;img{ width: 100%; }

.yewuList{ width: 90%; height: auto; margin:0 auto; padding-top: 3%; padding-bottom: 15%; box-sizing: border-box; }
.yewuList &gt; ul &gt; li{ width: 18.4%; float: left; margin-right: 2%; position: relative; }
.yewuList &gt; ul &gt; li:nth-of-type(4n){ margin-right: 0; }
.yewuList &gt; ul &gt; li &gt; a{ display: block; width: 100%; height: 0; padding-top: 166.6667%; position: relative; }
.yewuList &gt; ul &gt; li &gt; a &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; z-index: 180; }
/*.yewuList &gt; ul &gt; li &gt; a::after{ content: ' '; width: 100%; height: 100%; }*/
.yewuList &gt; ul &gt; li &gt; .yewuItemAbout{ display: block; width: 100%; height: 100%; background-color: rgba(83,135,219,0.8); position: absolute; left:0; top:0; z-index: 200; box-sizing: border-box; padding:7%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.yewuList &gt; ul &gt; li &gt; .yewuItemAbout &gt; div{ width: 100%; height: 100%; box-sizing: border-box; border:1px solid #FFF; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; }
.yewuList &gt; ul &gt; li &gt; .yewuItemAbout &gt; div &gt; p{ width: 55%; margin:0 auto; }
.yewuList &gt; ul &gt; li &gt; .yewuItemAbout &gt; div &gt; h5{ width: 35px; margin:10% auto; }
.yewuList &gt; ul &gt; li &gt; .yewuItemAbout &gt; div &gt; p img,.yewuList &gt; ul &gt; li &gt; .yewuItemAbout &gt; div &gt; h5 &gt; img{ width: 100%; }
.yewuList &gt; ul &gt; li &gt; .yewuItemAbout &gt; div &gt; h3{ font-weight: 550; font-size: 22px; line-height: 2; }
.yewuList &gt; ul &gt; li &gt; .yewuItemAbout &gt; div &gt; h3 &gt; a{ color: #FFF !important; }
.yewuList &gt; ul &gt; li &gt; .yewuItemAbout &gt; div &gt; h4{ line-height: 2; font-weight: normal; font-size: 14px; color: #FFF; }
.yewuList &gt; ul &gt; li:hover &gt; .yewuItemAbout{ display: block; width: 100%; height: 100%; background-color: rgba(255,255,255,0.2);}
/***/
.contactBg{ background-color: #ced2e4; background-image: url(../images/banner-contact.png); background-attachment: fixed; background-repeat: no-repeat; background-position: right top; }
.aboutBg{ background-color: #ced2e4; background-image: url(../images/banner-about.png); background-attachment: fixed; background-repeat: no-repeat; background-position: right top; background-size:100% 100%; }
.jobBg{ background-color: #f9f9f9;/* background-image: url(../images/banner-job.png); background-attachment: fixed; background-repeat: no-repeat; background-position: right top; background-size:100% 100%; */}

.historyBg{background-color: #ced2e4; background-image: url(../images/history.png); background-attachment: fixed; background-repeat: no-repeat; background-position: right top; background-size:100% 100%; }
.wartersupplyBg{background-color: #ced2e4; background-image: url(../images/watersupply.png); background-attachment: fixed; background-repeat: no-repeat; background-position: right top; background-size:100% 100%;}
.yewuBg{background-color: #ced2e4; background-image: url(../images/yewu.png); background-attachment: fixed; background-repeat: no-repeat; background-position: right top; background-size:100% 100%;}


.newsarticle{ width: 100%; box-sizing: border-box; padding:5% 9% 5% 8%; }
.newsarticle &gt; h1,.newsarticle &gt; p{width: 100%;line-height: 3;font-weight: normal;font-size: 28px;text-align: left;}
.newsarticle &gt; p{ font-size: 16px; text-transform: uppercase; }
.colarticle{flex: 1;line-height: 40px !important;font-size: 14px;box-sizing: border-box;text-align: left;}
.colarticle p,.colarticle span{line-height: 40px !important;font-family: "微软雅黑","宋体" !important;text-indent:2em !important;font-size: 16px !important;}
.colarticle span{text-indent:0em !important;}
.colarticle img{max-width:100%;margin: 1% auto;}
.colarticle table{border:1px solid #000 !important;margin: 0 auto !important;width:90% !important;}
.colarticle table,.colarticle table tr th,.colarticle table tr td { border:1px solid #000 !important; }




.warterSup-title{width: 78%; margin:0 auto;background-color: rgba(117,153,209,0.8); box-sizing: border-box; padding:2% 3%; line-height: 1.6; font-size: 20px; text-align: left; color: #FFF; margin-bottom: 2%;}
.warterSup-list{ width: 78%; margin:0 auto; box-sizing: border-box; padding-bottom: 10%; }
.warterSup-list &gt; ul &gt; li{ width: 100%; box-sizing: border-box; background-color: #FFF; padding:4% 4% 0 4%;}
/*.warterSup-list &gt; ul &gt; li &gt; a{ display: block; width: 100%; box-sizing: border-box; padding:4% 4% 0 4%; }*/
/*.warterSup-list &gt; ul &gt; li &gt; a:hover{ color: #333 !important; }*/
.warterSup-list &gt; ul &gt; li &gt; h3{ width: 100%; height: auto; line-height: 3; font-size: 24px; box-sizing: border-box; padding:0 2.5%; color: #FFF; text-align: left;background-color: #194fa5; }
.warterSup-list &gt; ul &gt; li &gt; .wsItem-about{ width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; margin-top: 2.5%; }
.warterSup-list &gt; ul &gt; li &gt; .wsItem-about &gt; div{ width: 54%; box-sizing: border-box; padding-top: 4%; font-size: 18px; line-height: 2; text-align: left; overflow: hidden; position: relative;}
.warterSup-list &gt; ul &gt; li &gt; .wsItem-about &gt; div::before{ content: ' '; width: 100%; height: 12%; background-color: #f2f2f2; position: absolute; left:0; top:0; }
.warterSup-list &gt; ul &gt; li &gt; .wsItem-about &gt; p{ width: 43%; overflow: hidden; }
.warterSup-list &gt; ul &gt; li &gt; .wsItem-about &gt; p &gt;img{ width: 100%; }
/********/
.wslMode{ width:100%; }
.wslMode-item{ width: 100%; background-color: #f4f5f7; box-sizing: border-box; padding:50px 302px 50px 30px; position: relative; height: auto; margin-bottom: 20px; float: left;}
.wslModeItem-about{ width: 100%; overflow: hidden; height: 316px; box-sizing: border-box; padding-right: 5%; font-size: 16px; line-height:31px;  }
.wslModeItem-img{ width: 272px; height: 316px; overflow: hidden; position: absolute; right:30px; top:50px; }
.wslModeItem-img img{ width: 272px; }
.wslMode-img{ width: 100%; overflow: hidden; }
.wslMode-img img{ width: 100%; }

.wslHeader{ width: 100%; position: relative; z-index: 200;}
.wslHeader::after{ content: ' '; width: 100%; height: 10px; background-color: #f9f9f9; position: absolute; right:0; top:50%; margin-top: -5px; z-index: 220; }
.wslHeader h3,.wslHeader p{ display: block; font-weight: 550; color: #1b3271; line-height: 1.5; width:220px; background-color: #FFF; position: relative; z-index: 320; font-size: 36px; position: relative; z-index: 240;}
.wslHeader p{ text-transform: uppercase; font-size: 20px; font-weight: normal;}

.wslContent{width: 100%; box-sizing: border-box; padding:3% 0; line-height: 30px; text-align: left; font-size: 16px; color: #666;}
.advList{ width: 100%; }
.advList &gt; .advItem{ width: 100%; background-color: #194fa5; position: relative; padding-left:60px; float: left; margin-bottom: 20px; box-sizing: border-box;}
.advList &gt; .advItem &gt; .advItemTitle{ width: 60px; height: 100%; position: absolute; left:0; top:0; }
.advList &gt; .advItem &gt; .advItemTitle &gt; p{ width: 60px; height: 60px; line-height: 60px; font-size: 48px; text-align: center;text-transform: uppercase; color: #FFF; position: absolute; left:0; top:50%; margin-top: -30px; }
.advList &gt; .advItem &gt; .advItemRight{ width: 100%; box-sizing: border-box; padding:30px; line-height: 30px; text-align: left; font-size: 16px; background-color: #f4f5f7; }

.wslHonor{width: 100%; box-sizing: border-box; height: auto; padding: 3%; background-color: #f4f5f7; position: relative; z-index: 180;}
.wslHonor::after{ content: ' '; width: 100%; height: 50%; background-color: #194da1; position: absolute;left:0; bottom:0; z-index: 200; }
.wslHonor &gt; .wslHonorItem{ display: block; width: 44%; float: left; margin-right: 2%;  position: relative; z-index: 220;}
.wslHonor &gt; .wslHonorItem:nth-of-type(3n){ margin-right: 0; }
.wslHonor &gt; .wslHonorItem:nth-of-type(1){width: 24%; }
.wslHonor &gt; .wslHonorItem:nth-of-type(2){ width: 28%; }
.wslHonor &gt; .wslHonorItem &gt; p{ width: 100%; height: 0; padding-top: 75%; position: relative;  }
.wslHonor &gt; .wslHonorItem &gt; p &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; box-shadow: 0 0 6px rgba(0,0,0,0.13); box-sizing: border-box; border:1px solid rgba(0,0,0,0.13);  }
.wslHonor &gt; .wslHonorItem:nth-of-type(1) &gt; p{padding-top: 137.8%;}
.wslHonor &gt; .wslHonorItem:nth-of-type(2) &gt; p{padding-top: 118%;}
.wslHonor &gt; .wslHonorItem &gt; h4{ width: 100%; height: 68px; font-weight: normal; font-size: 14px; box-sizing: border-box; padding:10px 16px; line-height: 24px; overflow: hidden; text-align: center; color: #FFF !important;}



.wslAbout{ width: 100%; box-sizing: border-box; padding:3%; line-height: 30px; text-align: left; font-size: 16px; color: #666;}
.wslTitle{ width: 100%;height: 40px; line-height: 40px; font-size: 24px; font-weight: 550; color: #194fa5; 
	text-align: center; margin-top: 10px; margin-bottom: 20px;}
.hotCheck{ width: 100%; height: auto; padding-bottom: 20px;}
.hotCheck &gt; .hotCheckItem{ display: block; width: 44%; float: left; margin-right: 2%; background-color: #f4f5f7;}
.hotCheck &gt; .hotCheckItem:nth-of-type(3n){ margin-right: 0; }
.hotCheck &gt; .hotCheckItem:nth-of-type(1){width: 24%; }
.hotCheck &gt; .hotCheckItem:nth-of-type(2){ width: 28%; }
.hotCheck &gt; .hotCheckItem &gt; p{ width: 100%; height: 0; padding-top: 75%; position: relative; }
.hotCheck &gt; .hotCheckItem &gt; p &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; }
.hotCheck &gt; .hotCheckItem:nth-of-type(1) &gt; p{padding-top: 137.8%;}
.hotCheck &gt; .hotCheckItem:nth-of-type(2) &gt; p{padding-top: 118%;}
.hotCheck &gt; .hotCheckItem &gt; h4{ width: 100%; height: 68px; font-weight: normal; font-size: 14px; box-sizing: border-box; padding:10px 16px; line-height: 24px; overflow: hidden; text-align: center;}


.dayCheck{ width: 100%; height: auto; padding-bottom: 20px;}
.dayCheck &gt; .dayCheckItem{ display: block; width: 30%; float: left; margin-right: 2%; background-color: #f4f5f7;}
.dayCheck &gt; .dayCheckItem:nth-of-type(4n){ margin-right: 0; }
.dayCheck &gt; .dayCheckItem:nth-of-type(1),.dayCheck &gt; .dayCheckItem:nth-of-type(4){ width: 17%; }
.dayCheck &gt; .dayCheckItem &gt; p{ width: 100%; height: 0; padding-top: 75%; position: relative; }
.dayCheck &gt; .dayCheckItem &gt; p &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; }
.dayCheck &gt; .dayCheckItem:nth-of-type(1) &gt; p,.dayCheck &gt; .dayCheckItem:nth-of-type(4) &gt; p{padding-top: 132%;}
.dayCheck &gt; .dayCheckItem &gt; h4{ width: 100%; height: 68px; font-weight: normal; font-size: 14px; box-sizing: border-box; padding:10px 16px; line-height: 24px; overflow: hidden; text-align: center;}

.regular{ width: 100%; height: auto; padding-bottom: 20px;}
.regular &gt; .regularItem{ display: block; width: 31%; float: left; margin-right: 3.5%; background-color: #f4f5f7;}
.regular &gt; .regularItem:nth-of-type(3n){ margin-right: 0; }
/*.regular &gt; .regularItem &gt; a{ display: block; overflow: hidden; }*/
.regular &gt; .regularItem &gt; p{ width: 100%; height: 0; padding-top: 75%; position: relative; }
.regular &gt; .regularItem &gt; p &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; }
.regular &gt; .regularItem &gt; h4{ width: 100%; height: 68px; font-weight: normal; font-size: 14px; box-sizing: border-box; padding:10px 16px; line-height: 24px; overflow: hidden; text-align: center;}

.daily{ width: 100%; height: auto; padding-bottom: 20px;}
.daily &gt; .dailyItem{ display: block; width: 18.4%; float: left; margin-right: 2%; background-color: #f4f5f7;}
.daily &gt; .dailyItem:nth-of-type(5n){ margin-right: 0; }
/*.daily &gt; .dailyItem &gt; a{ display: block; overflow: hidden; }*/
.daily &gt; .dailyItem &gt; p{ width: 100%; height: 0; padding-top: 134.41%; position: relative; }
.daily &gt; .dailyItem &gt; p &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; }
.daily &gt; .dailyItem &gt; h4{ width: 100%; height: 68px; font-weight: normal; font-size: 14px; box-sizing: border-box; padding:10px 16px; line-height: 24px; overflow: hidden; text-align: center;}


.wslDang,.wslTuan{ width: 100%; box-sizing: border-box; padding-bottom:20px;}
.wslDang &gt; .wslDangItem,.wslTuan &gt; .wslTuanItem{ width: 32%; float: left; overflow: hidden; margin-right: 2%;}
.wslDang &gt; .wslDangItem:nth-of-type(3n),.wslTuan &gt; .wslTuanItem:nth-of-type(3n){ margin-right: 0; }
.wslDang &gt; .wslDangItem &gt; a,.wslTuan &gt; .wslTuanItem &gt; a{ display: block; width: 100%; height: 0; padding-top:55.25%; position: relative; overflow: hidden;  }
.wslTuan &gt; .wslTuanItem &gt; a{ padding-top: 66.3%; }
.wslDang &gt; .wslDangItem &gt; a &gt; img,.wslTuan &gt; .wslTuanItem &gt; a &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; }

.wslSafe{ width: 100%; box-sizing: border-box; padding-left:10%; padding-right: 10%;}
.wslSafe &gt; .wslSafeItem{ width: 48%; float: left; overflow: hidden; margin:0 1%;}
/*.wslSafe &gt; .wslSafeItem:nth-of-type(3n),.wslTuan &gt; .wslTuanItem:nth-of-type(3n){ margin-right: 0; }*/
.wslSafe &gt; .wslSafeItem &gt; a{ display: block; width: 100%; height: 0; padding-top:57.778%; position: relative; overflow: hidden;  }
.wslSafe &gt; .wslSafeItem &gt; a &gt; img{ width: 100%; height: 100%; position: absolute; left:0; top:0; }

.drill{ width: 100%; position: relative; background-color: #f4f5f7; }
.drill &gt; .drillImg{ width: 56.73%; overflow: hidden; float: left; }
.drill &gt; .drillImg &gt; p{ width: 50%; float: left; overflow: hidden; box-sizing: border-box; border-right: 1px solid #FFF; }
.drill &gt; .drillImg &gt; p &gt; a{ display: block; width: 100%; height: 0; padding-top: 107.097%; position: relative; overflow: hidden; }
.drill &gt; .drillImg &gt; p &gt; a &gt; img{ width: 100%; height: 100%;position: absolute; left:0; top:0; }
.drill &gt; .drillAbout{ width: 43.27%; float: right; box-sizing: border-box; padding:4%; }
.drill &gt; .drillAbout &gt; p{ width: 100%; height: auto; line-height: 24px; text-align: left; font-size: 14px; max-height: 96px; }

.qualificat{ width: 100%; position: relative;}
.qualificat .qualificatBg{ width: 100%; overflow: hidden; }
.qualificat .qualificatBg img{ width: 100%; }
.qualificat .qualificatList{ width: 100%; height: 100%; box-sizing: border-box; padding:4% 10%; position: absolute; left:0; top:0;}
.qualificat .qualificatList .qlItem{ width:48%; float: left; overflow: hidden;  }
.qualificat .qualificatList .qlItem:nth-of-type(2n){ float: right; }
.qualificat .qualificatList .qlItem img{ width: 100%; }

/********/
.hjAbout{ width: 680px; margin:0 auto; }
.hjAboutImg1,.hjAboutImg2{ width:460px; height: 270px; float: left; overflow: hidden; }
.hjAboutImg2{ width: 180px; float: right;}
.hjAboutImg1 img,.hjAboutImg2 img{ width:460px; height: 270px;}
.hjAboutImg2,.hjAboutImg2 img{ width: 180px; }
.hjTeam{ width: 100%; overflow: hidden; }
.hjTeam img{ width: 100%; }
.hjMachine{ width: 100%; height: auto; }
.hjMachine .hjMachineItem{ display: block; width: 25%; float: left; overflow: hidden; }
.hjMachine .hjMachineItem p{ width: 64%; margin:0 auto; overflow: hidden; }
.hjMachine .hjMachineItem p img{ width: 100%; }
.hjMachine .hjMachineItem h4{ width: 100%; font-size: 16px; text-align: center; font-weight: normal; line-height: 60px; overflow: hidden; height: 60px;}
.hjAbility{ width: 100%; position: relative; overflow: hidden; }
.hjAbility img{ width: 100%; }
.hjAbility .hjAbilityAbout{ width: 43%; height: 100%; position: absolute; left:0; top:0; }
.hjAbility .hjAbilityAbout p{ width: 100%; height: 90px; line-height: 30px; font-size: 16px; text-align: left; overflow: hidden; position: absolute; left:0; top:50%; margin-top: -45px; box-sizing: border-box; padding:0 10%; color: #FFF; }
.hjHonor{ width: 100%; box-sizing: border-box; padding:3%; height: auto; background-color: #f4f5f7;}
.hjHonor .hjHonorItem{ width: 20%; float: left; box-sizing: border-box; padding:0 2%;}
.hjHonor .hjHonorItem img{ width: 100%; }

.hjCom{ width: 100%; height: auto; box-sizing: border-box; border:1px solid #FFF; }
.hjCom .hjComItem{ width: 100%; height: auto; border-bottom: 1px solid #FFF; position: relative; padding-left:96px; box-sizing: border-box; font-size: 16px;}
.hjComItem-header{ width: 96px; height: 100%; background-color: #dee6f7; position: absolute; left:0; top:0; }
.hjComItem-header p{ width: 20px; height: auto; line-height: 24px; font-size: 16px; position: absolute; left:50%; top:50%; margin-left: -10px; }
.hjComItem-right{ width: 100%;  height: auto;background-color: #DDD; box-sizing: border-box; border-left:1px solid #FFF;}
.hjComItem-right .hjComItemRight-line{ width: 100%; height: auto;  position: relative; border-bottom: 1px solid #FFF; padding-left:150px; box-sizing: border-box;}
.hjComItem-right .hjComItemRight-line:nth-last-of-type(1){ border-bottom: 0; }
.hjComIrl-title{ width: 150px; height: 100%; background-color: #e9eef8; position: absolute; left:0; top:0; }
.hjComIrl-title p{ width: 100%; height: 24px;  line-height: 24px; position: absolute; left:0; top:50%; margin-top: -12px; text-align: center; }
.hjComIrl-about{ width: 100%; height: auto; box-sizing: border-box; padding:2%; line-height: 24px; text-align: left; font-size: 16px; border-left:1px solid #FFF; background-color: #f4f5f7 }



.zlbjCol{width: 100%;height: auto;}
.zlbjF1{ width:100%; position: relative;background-color: #FFF;  }
.zlbjF1 &gt; img{width: auto;margin: 0 auto;padding-top: 18%;margin-bottom: 80px;padding-left: 80px;}
.zlbjF1 &gt; section{ width: 100%; height: 100%; position: absolute; left:0; top:0;  display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; box-sizing: border-box; padding-top: 3.5%; }
.zlbjF1 &gt; section &gt; h3{ font-weight: normal; font-size: 36px; line-height: 3; text-align: center; }
.zlbjF1 &gt; section &gt; p{ width: 40px; height: 4px; background-color: #e8410d; }
.zlbjF1 &gt; section &gt; div{ width: 100%; font-size: 16px; line-height: 2; text-align: center; margin-top: 3%; }
.zlbjbanner{ width: 100%; overflow: hidden; position: relative; }
.aboutMain &gt; .zlbjbanner &gt; img{ width: 100%;opacity:1 }




.zlbjF2,.zlbjF3,.zlbjF4{ width:100%; position: relative;background-color: #FFF;  }
.zlbjF2 &gt; img，.zlbjF3 &gt; img，.zlbjF4 &gt; img{ width: 100%; }
.zlbjF2 &gt; section,.zlbjF3 &gt; section,.zlbjF1 &gt; section{ width: 100%; height: 100%; position: absolute; left:0; top:0;  display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; box-sizing: border-box; padding-top: 3.5%; }
.zlbjF2 &gt; section &gt; h3,.zlbjF3 &gt; section &gt; h3,.zlbjF1 &gt; section &gt; h3{ font-weight: normal; font-size: 36px; line-height: 3; text-align: center; }
.zlbjF2 &gt; section &gt; p,.zlbjF3 &gt; section &gt; p,.zlbjF1 &gt; section &gt; p{width: 229px;height: 2px;background: url(../images/zlbj_p.png);}
.zlbjF2 &gt; section &gt; h4,.zlbjF3 &gt; section &gt; h4,.zlbjF1 &gt; section &gt; h4{ font-weight: normal; font-size: 16px; line-height: 3; text-align: center;color:#666666 }
.zlbjF2 &gt; section &gt; div,.zlbjF3 &gt; section &gt; div,.zlbjF1 &gt; section &gt; div{ width: 100%; font-size: 16px; line-height: 2; text-align: center; margin-top: 3%; }
.zlbjF3 &gt; section &gt; h3,.zlbjF3 &gt; section &gt; h4,.zlbjF3 &gt; section &gt; div{color:#fff}



.ygtdCol{width: 100%;height: auto;}
.ygtd{ width:100%; position: relative;background-color: #FFF;  }
.ygtd &gt; img{ width: 100%; }
.ygtd &gt; section{width: 100%;height: 180%;position: absolute; left:0; top:0;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start;align-items: center;box-sizing: border-box;padding-top: 3.5%;}
.ygtd &gt; section &gt; h3{ font-weight: normal; font-size: 36px; line-height: 3; text-align: center; }
.ygtd &gt; section &gt; p{width: 229px;height: 2px;background: url(../images/zlbj_p.png);}
.ygtd &gt; section &gt; h4{ font-weight: normal; font-size: 16px; line-height: 3; text-align: center;color:#666666 }
.ygtd-list{width: 1400px;margin:0 auto;margin-top: 30px;overflow: hidden;}
.ygtd-list ul li{float:left;width: 220px;height: 140px;background-color:#5883b4;margin:10px;padding:20px;border-radius:5px;position:relative;background-image: url(../images/ygtd_01.png);background-position: bottom right;background-size: 25%;background-repeat: no-repeat;}
.ygtd-list ul li h3{font-size: 15px;color:#fff;margin-top:30px;line-height:60px;font-weight:normal;position: relative;}
.ygtd-list ul li h3::after{content: ' ';width:38px;height:4px;background:#fff;position:absolute;left:0;}
.ygtd-list ul li p{position:absolute;bottom:28px;left:20px;}
.ygtd-list ul li:nth-of-type(2){background-color: #b75bc8;background-image: url(../images/ygtd_02.png); }
.ygtd-list ul li:nth-of-type(3){background-color: #416bbf;background-image: url(../images/ygtd_03.png); }
.ygtd-list ul li:nth-of-type(4){background-color: #4f3f92;background-image: url(../images/ygtd_04.png); }
.ygtd-list ul li:nth-of-type(5){background-color: #58b3b4;background-image: url(../images/ygtd_05.png); }
.ygtd-list ul li:nth-of-type(6){background-color: #19c0d1;background-image: url(../images/ygtd_06.png); }
.ygtd-list ul li:nth-of-type(7){background-color: #27cda3;background-image: url(../images/ygtd_07.png); }
.ygtd-list ul li:nth-of-type(8){background-color: #d74d5d;background-image: url(../images/ygtd_08.png); }
</pre></body></html>