@charset "UTF-8"; /** * * @authors Your Name (you@example.org) * @date 2019-03-16 14:28:09 * @version $Id$ */ div.wu{ height: 500px; } div.wu h3{ text-align:center; font-size:18px; line-height:66px; } section.banner{ width: 100%; height: 0; padding-top: 30%; overflow: hidden; position: relative; } section.banner p{ position: absolute; top:50%; left:50%; transform:translate(-50%, -100%); z-index: 2; font-size:48px; color: #fff; white-space:nowrap; } section.banner span{ position: absolute; top:50%; left:50%; transform:translate(-50%, 20%); z-index: 2; font-size:18px; color: rgba(255, 255, 255, 0.4); white-space:nowrap; } section.banner img{ width: 100%; position: absolute; top:0%; left:0; z-index: 1; animation:mymoves 13s infinite; animation-iteration-count:1; -webkit-animation:mymoves 13s infinite; /*Safari and Chrome*/ -webkit-animation-iteration-count:1; } @keyframes mymoves { from {transform: scale(1.1);} to {transform: scale(1);} } @-webkit-keyframes mymoves /*Safari and Chrome*/ { from {transform: scale(1.1);} to {transform: scale(1);} } section.banner img.model{ display:none; } @media only screen and (max-width: 750px) { section.banner{ padding-top: 33%; } section.banner .pc{ display:none; } section.banner img.model{ display:block; } } section.two{ background-color:#f7f8fa; overflow: hidden; width: 100%; } section.two .list{ overflow: hidden; clear: left; float: left; position: relative; left: 50%;/*鏁翠釜鍒嗛〉鍚戝彸杈圭Щ鍔ㄥ搴︾殑50%*/ text-align: center; transform: translateX(-50%); } section.two .list a{ display:block; width: 200px; height: 50px; text-align:center; line-height:50px; font-size:18px; float:left; transition: width 1s,background-color 1s; /* 2s琛ㄧず鍔ㄧ敾鎸佺画鏃堕棿,澶氫釜灞炴€т箣闂寸敤","鍙烽殧寮€ */ transition: width 1s linear; /* 鍖€閫熷彉鍖?榛樿閫熷害鐢卞揩鍙樻參) */ transition: width 1s linear 1s; /* 1s琛ㄧず寤惰繜鍙樺寲 */ transition: all 1s; /* 鎵€鏈夊睘鎬ч兘杩囨浮,涓旀晥鏋滀竴鏍 */ /* 杩囨浮灞炴€ */ transition-property: width; /*all:琛ㄧず鎵€鏈夊睘鎬?/ /* 杩囨浮灞炴€?蹇呴』璁剧疆杩囨浮鏃堕棿鎵嶄細鐢熸晥 */ transition-duration: 1s; /* 杩囨浮鎸佺画鏃堕棿 */ transition-timing-function: ease-in-out; /* 鍔ㄧ敾鍙樺够閫熷害 ease:鍑忛€?榛樿) linear:鍖€閫 ease-in:鍔犻€ ease-out:鍑忛€ ease-in-out:鍏堝姞閫熷悗鍑忛€ */ transition-delay: 0.1s; /* 鍔ㄧ敾寤惰繜 */ transition:all 1s ease-in-out 0s; } section.two .list a.on,section.two .list a:hover{ background-color:#235ba7; color: #fff; } @media only screen and (max-width: 660px) { section.two .list a{ width: 110px; } } @media only screen and (max-width: 360px) { section.two .list a{ width: 90px; } } /*list-news*/ section.main{ margin-bottom: 80px; } section.main .list-news{ margin-top: 27px; } section.main .list-news li{ margin-top: 40px; background-color:#f7f8fa; overflow: hidden; } section.main .list-news li:hover{ background-color:#fff; } section.main .list-news li .pic{ width: 23.5%; } section.main .list-news li .pic .pics{ width: 100%; height: 0; padding-top:72.7%; overflow: hidden; position: relative; } section.main .list-news li .pic .pics img{ width: 100%; height: 100%; position: absolute; top:0; left:0; z-index: 1; } section.main .list-news li .cricum{ width: 59%; margin-left: 4%; } section.main .list-news li .cricum h3{ font-size:18px; line-height:66px; margin-top: 24px; } section.main .list-news li .cricum p{ line-height:26px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } section.main .list-news li .time{ width: 50px; height: 38px; background-color:#235ba7; color: #fff; text-align:center; padding: 14px; margin-top: 48px; margin-right: 34px; } section.main .list-news li .time p{ text-align:center; color: #fff; font-size:20px; line-height:20px; } section.main .list-news li .time span{ font-size:12px; line-height:12px; } @media only screen and (max-width: 750px) { section.main .list-news li .cricum{ width: 50%; } section.main .list-news li .cricum h3{ margin-top: 0px; font-size:16px; line-height:20px; } section.main .list-news li .cricum p{ font-size:14px; -webkit-line-clamp: 2; } section.main .list-news li .time{ margin-top: 10px; margin-right: 18px; } } @media only screen and (max-width: 500px){ section.main .list-news li .time{ width: 33px; height: 27px; padding: 7px; } section.main .list-news li .time p{ font-size:13px; line-height:7px; } section.main .list-news li .cricum h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:14px; margin-top: 9px; } section.main .list-news li .cricum p{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; } } /*list-news-end*/ /*article-news*/ div.article-news{ max-width:1120px; margin: 50px auto 0; } div.article-news h1{ text-align:center; font-size:36px; line-height:66px; } div.article-news span{ display:block; width: 100%; text-align:center; line-height:66px; color: #999; border-bottom:1px solid #eeeeee; } div.article-news .title{ border-bottom:1px solid #eeeeee; } div.article-news .title span{ border-bottom:0px; } div.article-news .tadeil{ margin-top: 20px; } div.article-news .tadeil h3{ font-size:18px; line-height:24px; margin-top: 20px; } div.article-news .tadeil p{ margin-top: 20px; } div.article-news .tadeil p span{ text-align:left; border-bottom:0px; } div.article-news .tadeil img{ max-width: 100%!important; margin-top: 20px; } div.shang{ margin-top: 70px; overflow: hidden; } div.shang a{ width: 33%; float:left; margin-left: 1px; text-align:center; color: #999999; line-height:50px; background-color:#f7f8fa; position: relative; } div.shang a:hover{ background-color:#235ba7; color: #fff; } div.shang a.pver:before{ content:''; width: 10px; height: 17px; background:url(../images/zuo1.png) no-repeat center; position: absolute; top:50%; left:50%; transform: translate(-580%, -43%); z-index: 1; } div.shang a.pver:hover::before{ background:url(../images/zuo.png) no-repeat center; } div.shang a.list1:before{ content:''; width: 24px; height: 16px; background:url(../images/list1.png) no-repeat center; position: absolute; top:50%; left:50%; transform: translate(-260%, -40%); z-index: 1; } div.shang a.list1:hover::before{ background:url(../images/list.png) no-repeat center; } div.shang a.next:after{ content:''; width: 10px; height: 17px; background:url(../images/you5.png) no-repeat center; position: absolute; top:50%; right:50%; transform: translate(580%, -43%); z-index: 1; } div.shang a.next:hover::after{ background:url(../images/you.png) no-repeat center; } @media only screen and (max-width: 750px) { div.article-news .tadeil .ww{ float:left; } } @media only screen and (max-width: 490px) { div.article-news h1{ font-size:28px; } div.article-news span{ line-height:22px; } div.shang a{ width: 30%; text-align:right; padding-right: 3%; } div.shang a.next{ text-align:left; padding-left: 3%; padding-right: 0; } div.shang a.pver:before{ transform: translate(-380%, -43%); } div.shang a.list1:before{ transform: translate(-169%, -43%); } div.shang a.next:after { transform: translate(380%, -43%); } } /*article-news-end*/ div.list-case ul{ overflow: hidden; margin-top: 20px; } div.list-case li{ width: 32%; margin-left: 2%; overflow: hidden; float:left; margin-top: 40px; max-height: 470px; } div.list-case li:nth-child(3n-2){ margin-left: 0; } div.list-case li .pic{ width: 100%; height: 0; padding-top:68.1%; overflow: hidden; position: relative; } div.list-case li .pic img{ width: 100%; height: 100%; position: absolute; top:0; left:0; z-index: 1; transition: all 1.2s; transform: scale(1.1); } div.list-case li .pic .shadow{ width: 100%; height: 0; background-color:rgba(0, 0, 0, 0.2); position: absolute; bottom:0; left:0; z-index: 1; } div.list-case li .down{ border:1px solid #e9e9e9; } div.list-case li .down h3{ width: 87.2%; margin: 0 auto; font-size:20px; line-height:40px; margin-top: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div.list-case li .down p{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 87.2%; margin: 0 auto; } div.list-case li .down .more{ margin: 20px 25px 0 25px; border-top: 1px solid #e9e9e9; position: relative; } div.list-case li .down .more:after{ content:''; width: 39px; height: 22px; background:url(../images/you1.png) no-repeat center; position: absolute; top:50%; transform: translateY(-50%); right:0; z-index: 1; } div.list-case li:hover img{ transform: scale(1); } div.list-case li:hover .shadow{ height: 100%; transition: all 0.7s ease 0.1s; -webkit-transform: all 1s ease 0.1s; } div.list-case li:hover .down{ background-color:#235ba7; border:1px solid #235ba7; margin-top: -34px; transition: all 0.7s ease 0.1s; -webkit-transform: all 1s ease 0.1s; position: relative; z-index: 1; } div.list-case li:hover .down h3{ color: #fff; margin-top: 25px; } div.list-case li:hover .down p{ color: #fff; margin-bottom: 40px; margin-top: 10px; } div.list-case li:hover .down span{ color: #fff; } div.list-case li:hover .down .more:after{ background:url(../images/you2.png) no-repeat center; } div.list-case .pages{ display:none; } div.list-case .cha{ width: 100%; text-align:center; background-color:#799dcd; margin-top: 48px; } div.list-case .cha a{ display:block; width: 100%; font-size:14px; color: #fff; line-height:48px; position: relative; } div.list-case .cha a:before{ content:''; width: 20px; height: 12px; background:url(../images/more.png) center no-repeat; position: absolute; top:50%; left:50%; transform: translate(-280%, -50%); z-index: 1; } @media only screen and (max-width: 750px) { div.list-case li{ width: 100%; margin-left: 0%; } div.list-case li:nth-child(3n-2){ margin-left: 0%; } } @media only screen and (max-width: 460px){ div.list-case li .down h3{ font-size:16px; margin-top: 0; } div.list-case li .down p{ font-size:14px; } div.list-case li span{ font-size:12px; } div.list-case li .down .more{ margin: 10px 10px 0 10px; } div.list-case li:hover .down h3{ margin-top: 0; } div.list-case li:hover .down p{ margin-bottom: 10px; } } /*about*/ div.about{ } div.about h1{ text-align:center; font-size:36px; line-height:40px; margin-top: 70px; } div.about b{ font-size:14px; line-height:24px; color: #235ba7; text-align:center; display:block; margin-top: 6px; } div.about .content{ margin-top: 10px; } div.about .content p{ margin-top: 20px; text-indent:2em; } div.about .culture{ margin-top: 60px; } div.about .culture .left{ width: 50%; position: relative; } div.about .culture .left:after{ content:''; display:block; width:0; height:0; border-width:8px 0 8px 8px; border-style:solid; border-color:transparent transparent transparent #fff;/*閫忔槑 閫忔槑 閫忔槑 榛?/ position:absolute; top:50%; right:-8px; transform:translateY(-50%); z-index: 2; } div.about .culture .left:before{ content:''; width: 60px; height: 60px; background-color:#235ba7; position: absolute; top:50%; right:-30px; transform:translateY(-50%); z-index: 1; } div.about .culture .left img{ width: 100%; } div.about .culture .right{ width: 50%; background-color:#f7f8fa; padding-bottom: 103px; } div.about .culture .right h3{ font-size:24px; line-height:24px; width: 75.7%; margin: 60px 12.8%; position: relative; } div.about .culture .right h3:after{ content:''; width: 62px; height: 3px; background-color:#333; position: absolute; bottom:-24px; left:0; } div.about .culture .right p{ width: 78.7%; margin: 0 auto; } @media only screen and (max-width: 750px) { div.about .culture .left{ width: 100%; } div.about .culture .right{ width: 100%; } div.about .culture .left:after{ border-width:0; } div.about .culture .left:before{ width: 0px; height: 0px; } } @media only screen and (max-width: 490px) { div.about h1{ font-size:28px; margin-top: 32px; } div.about .culture .right h3{ margin: 30px 5% 60px; } div.about .culture .right p{ width: 90%; } } /*about-end*/ /*contact*/ div.contact{ margin-top: 82px; } div.contact .right{ width: 61%; } #map{ width: 100%; height: 496px; font-size:12px; } div.contact .left{ width: 100%; /*background-color:#235ba7;*/ color: #235ba7; overflow: hidden; padding-bottom: 78px; } div.contact .left h3{ font-size:24px; line-height:24px; margin-top: 72px; padding-bottom: 24px; border-bottom:1px solid rgba(35,91,167, 0.13); width: 96%; margin-left: 3%; position: relative; } div.contact .left h3:after{ content:''; width: 62px; height: 4px; background-color:#235ba7; position: absolute; bottom:-2px; left:0; z-index: 1; } div.contact .left .ke{ width: 28%; margin-left: 3%; border-bottom:1px solid rgba(35,91,167, 0.04); padding: 16px 0; padding-left: 2%; margin-top: 18px; float: left; } div.contact .left .ke:first-of-type{ } div.contact .left .ke span{ display:block; font-size:16px; line-height:30px; position: relative; } div.contact .left .ke span.ico:before{ content:''; width: 10px; height: 16px; background:url(../images/shouji.png) no-repeat center; position: absolute; top:8px; left:-6%; z-index: 1; } div.contact .left .ke span.ico2:before{ content:''; width: 14px; height: 14px; background:url(../images/dianhua.png) no-repeat center; position: absolute; top:8px; left:-6%; z-index: 1; } div.contact .left .ke span.ico3:before{ content:''; width: 12px; height: 16px; background:url(../images/add.png) no-repeat center; position: absolute; top:8px; left:-6%; z-index: 1; } @media only screen and (max-width: 750px) { div.contact .right{ float:none; width: 100%; } div.contact .left{ float:none; width: 100%; } } /*contact-end*/ /*service*/ div.headers{ margin-top: 70px; } div.headers h3{ font-size:36px; line-height:40px; text-align:center; } div.headers b{ display:block; text-align:center; font-size:14px; margin-top: 6px; } div.up .ups .plans{ width: 19%; height: 105px; background: red; position: relative; } div.up .ups .plans:before{ content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #fff; border-right: 29px solid #fff; width: 42px; height: 0; } div.up .ups .plans:after{ content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #fff; border-right: 29px solid #fff; width: 42px; height: 0; } div.downs{ background-color:#f7f8fa; overflow: hidden; } div.downs .listss{ overflow: hidden; } div.downs .listss li{ width: 48.5%; margin-left: 2.7%; background-color:#fff; border-radius:10px; float:left; height:88px; border:1px solid #f4f4f5; margin-top: 30px; } div.downs .listss li:nth-child(odd){ margin-left: 0; } div.downs .listss li p{ line-height:88px; } /*service-end*/ /*plan*/ div.plan .titles{ width: 99.7%; margin-top: 52px; border:1px solid #eeeeee; overflow: hidden; } div.plan .titles .picd{ margin: 40px 2.5%; width: 20%; } div.plan .titles .picd .pice{ width: 100%; } div.plan .titles .picd .pice img{ width: 100%; } div.plan .titles .tit{ margin: 40px 0; } div.plan .titles .tit h3{ font-size:42px; color: #c5c5c5; line-height:72px; } div.plan .titles .tit p{ font-size:16px; color: #c5c5c5; line-height:24px; } div.plan .titles .tit span{ font-size:18px; line-height:55px; color: #999999; } div.plan .three{ overflow: hidden; } div.plan .three li{ float:left; width: 33.2%; border-left:1px solid #eeeeee; border-bottom:1px solid #eee; } div.plan .three li:last-child{ border-right:1px solid #eee; } div.plan .three li a{ display:block; font-size:18px; line-height:52px; text-align:center; } div.plan .three li.on,div.plan .three li:hover{ background-color:#235ba7; border-left:1px solid #235ba7; border-bottom:1px solid #235ba7; } div.plan .three li.on a,div.plan .three li:hover a{ color: #fff; } @media only screen and (max-width: 750px) { div.plan .three li{ width: 33%; } div.plan .titles .picd{ width: 95%; margin-bottom: 30px; } div.plan .titles .tit{ margin-left: 2.5%; margin-top: 0; } } @media only screen and (max-width: 490px) { div.plan .titles{ margin-top: 20px; } div.plan .titles .picd{ margin: 14px 2.5%; } div.plan .titles .tit{ margin: 15px 2.5%; } div.plan .titles .tit h3{ font-size:28px; line-height:50px; } div.plan .three li{ width: 32.88%; } div.plan .three li a{ font-size:13px; } } div.plan .music{ padding: 96px 0; } div.plan .arc{ width: 100%; background-color:#f7f8fa; } div.plan .arc .music .right{ margin-left: 0; margin-right: 4%; } div.plan .music .pic{ width: 42.14%; } div.plan .music .pic img{ width: 100%; } div.plan .music .right{ width: 53.86%; margin-left: 4%; } div.plan .music .right h3{ font-size:32px; line-height:75px; } div.plan .music .right a{ display:block; width: 158px; height: 44px; border:1px solid #e6e8ec; text-align:center; line-height:44px; font-size:14px; color: #666; position: relative; margin-top: 36px; } div.plan .music .right a:after{ content:''; width: 7px; height: 12px; background:url(../images/you3.png) no-repeat center; position: absolute; top:50%; right: 13%; transform:translateY(-50%); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; z-index: 1; } div.plan .music .right a:hover{ background-color:#235ba7; color: #fff; } div.plan .music .right a:hover::after{ background:url(../images/you4.png) no-repeat center; right:80%; } @media only screen and (max-width: 750px) { div.plan .three li{ width: 32.86%; } div.plan .three li a{ font-size:13px; } div.plan .music .pic{ width: 100%; } div.plan .music .right{ width: 92%; margin: 0 4%; } div.plan .arc .music{ padding-top: 0; } div.plan .arc .music .right{ width: 92%; margin: 0 4%; } } div.plan .school{ overflow: hidden; margin-top: 68px; background-color:#f7f8fa; } div.plan .school .pic{ width: 39.28%; overflow: hidden; } div.plan .school:nth-of-type(even) .pic{ float:right; } div.plan .school .pic a{ display:block; width: 100%; position: relative; } /* div.plan .school .pic a:after{ */ /* content:''; */ /* width: 48px; */ /* height: 48px; */ /* background:url(../images/bo.png) center no-repeat; */ /* position: absolute; */ /* right: 7%; */ /* bottom:30px; */ /* z-index: 3; */ /* } */ /* div.plan .school:nth-of-type(even) .pic a:after{ */ /* content:''; */ /* width: 48px; */ /* height: 48px; */ /* background:url(../images/bo.png) center no-repeat; */ /* position: absolute; */ /* left: 7%; */ /* bottom:30px; */ /* z-index: 3; */ /* } */ div.plan .school .pic a img{ width: 100%; } div.plan .school .right{ width: 60.72%; } div.plan .school .right h3{ margin-left: 7%; font-size:32px; line-height:30px; margin-top: 60px; } div.plan .school .right p{ margin-top: 27px; width: 87%; margin-left: 7%; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } div.plan .school .right a{ display:block; width: 158px; height: 44px; border:1px solid #e6e8ec; text-align:center; line-height:44px; font-size:14px; color: #666; position: relative; margin-top: 36px; margin-left: 7%; } div.plan .school .right a:after{ content:''; width: 7px; height: 12px; background:url(../images/you3.png) no-repeat center; position: absolute; top:50%; right: 13%; transform:translateY(-50%); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; z-index: 1; } div.plan .school .right a:hover{ background-color:#235ba7; color: #fff; } div.plan .school .right a:hover::after{ background:url(../images/you4.png) no-repeat center; right:80%; } @media only screen and (max-width: 750px) { div.plan .school .pic{ width: 100%; overflow: hidden; } div.plan .school .right{ width: 92%; margin: 0 4%; padding-bottom: 60px; } } @media only screen and (max-width: 490px) { div.plan .school{ margin-top: 30px; } div.plan .school .right h3{ margin-left: 0; font-size:24px; margin-top: 15px; } div.plan .school .right p { margin-top: 11px; width: 100%; margin-left: 0; } div.plan .school .right a{ margin-top: 20px; margin-left: 0; } div.plan .school .right{ padding-bottom: 30px; } } div.planer{ overflow: hidden; margin-top: 80px; } div.planer li{ float:left; width: 49%; margin-left: 2%; position: relative; } div.planer li:first-child{ margin-left: 0; } div.planer li .imgbox{ width: 100%; height: 0px; padding-top: 72.72%; overflow: hidden; position: relative; } div.planer li .imgbox .imgboxs{ width: 100%; height: 100%; background-color:rgba(0, 0, 0, 0.3); position: absolute; top:0; left:0; z-index: 2; } div.planer li .imgbox .imgboxs1{ width: 100%; height: 0; background-color:rgba(26, 92, 181, 0.9); position: absolute; bottom:50%; /*transform: translateY(-50%);*/ left:0; z-index: 2; } div.planer li .imgbox .imgboxs2{ width: 100%; height: 0; background-color:rgba(26, 92, 181, 0.9); position: absolute; top:50%; /*transform: translateY(-50%);*/ left:0; z-index: 2; } div.planer li .imgbox img{ height: 100%; position: absolute; top:0; left:0; z-index: 1; transition: all 1.2s; transform: scale(1.2); } div.planer li .iboxT{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 3; transition: all 1.2s; width: 80%; } div.planer li .iboxT span{ font-size:24px; color: #fff; display:block; text-align:center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div.planer li .iboxB{ position: absolute; width: 90%; left: 5%; bottom: 25%; text-align: center; color: #fff; height: 108px; } div.planer li .iboxB .line{ display: block; height: 0px; width: 2px; background-color: #fff; position: absolute; bottom:50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; } div.planer li .iboxB .cha{ display:block; width: 140px; height: 0px; text-align:center; line-height:42px; color: #fff; overflow: hidden; position: absolute; bottom:0; left:50%; transform: translateX(-50%); z-index: 5; } div.planer li:hover img{ transform: scale(1); } div.planer li:hover .imgboxs1{ height: 50%; transition: all 0.4s ease 0.4s; -webkit-transform: all 0.4s ease 0.4s; } div.planer li:hover .imgboxs2{ height: 50%; transition: all 0.4s ease 0.4s; -webkit-transform: all 0.4s ease 0.4s; } div.planer li:hover .iboxT{ transform: translate(-50%, -130%); } div.planer li:hover .iboxB .line{ height: 16px; transition: all 0.4s ease 0.4s; -webkit-transform: all 0.4s ease 0.4s; } div.planer li:hover .iboxB .cha{ height: 42px; transition: all 0.4s ease 0.4s; -webkit-transform: all 0.4s ease 0.4s; border:1px solid #fff; } @media only screen and (max-width: 750px) { div.planer li{ width: 100%; float:none; margin-left: 0; margin-top: 30px; } div.planer li:first-child{ margin-top: 0; } } @media only screen and (max-width: 490px) { div.planer li .iboxT span { font-size: 18px; } } /*plan-end*/ /*gov*/ div.gov .left{ width: 50%; margin: 70px 0; } div.gov .left img{ width: 90.4%; } div.gov .right{ width: 50%; background-color:#fbfbfc; padding-top: 137px; padding-bottom: 207px; } div.gov .right h3{ font-size:20px; line-height:24px; width: 82%; margin: 0 auto; } div.gov .right p{ width: 82%; margin: 0 auto; margin-top: 24px; } @media only screen and (max-width: 750px) { div.gov .left{ width: 100%; } div.gov .right{ width: 100%; padding: 50px 0; } } /*gov-end*/ /*article-school*/ div.article-news .school{ display:block; width: 158px; height: 44px; border:1px solid #e6e8ec; text-align:center; line-height:44px; font-size:14px; color: #666; position: relative; margin: 18px auto 38px; } div.article-news .school:after{ content:''; width: 7px; height: 12px; background:url(../images/you3.png) no-repeat center; position: absolute; top:50%; right: 13%; transform:translateY(-50%); z-index: 1; } div.article-news .school:hover{ background-color:#235ba7; color: #fff; } div.article-news .school:hover::after{ background:url(../images/you4.png) no-repeat center; } /*article-school-end*/ /*service*/ div.headers{ margin-top: 70px; } div.headers h3{ font-size:36px; line-height:40px; text-align:center; } div.headers b{ display:block; text-align:center; font-size:14px; margin-top: 6px; } div.up .ups ul{ position: relative; height: 600px; margin: 55px 10%; } div.up .ups ul li{ width: 268px; height: 268px; position: absolute; top:0; left:0; z-index: 1; background:url(../images/01.png) center no-repeat; background-size: cover; } div.up .ups ul li:nth-child(2){ top:195px; left:19%; background:url(../images/02.png) center no-repeat; background-size: cover; } div.up .ups ul li:nth-child(3){ top:0; left:38%; background:url(../images/03.png) center no-repeat; background-size: cover; } div.up .ups ul li:nth-child(4){ top:195px; left:57%; background:url(../images/04.png) center no-repeat; background-size: cover; } div.up .ups ul li:nth-child(5){ top:0; left:76%; background:url(../images/05.png) center no-repeat; background-size: cover; } div.up .ups ul li p{ font-size:24px; line-height:40px; color: #333; text-align:center; } div.up .ups ul li p:first-child{ margin-top: 100px; } div.up .ups ul li span{ display:block; color: #333; text-align:center; line-height:20px; } div.up .ups ul li .zero{ margin-left: 112px; margin-top: 20px; } div.downs{ background-color:#f7f8fa; overflow: hidden; padding-bottom: 80px; } div.downs .listss{ overflow: hidden; } div.downs .listss li{ width: 48.5%; margin-left: 2.7%; background-color:#fff; border-radius:10px; float:left; height:88px; border:1px solid #f4f4f5; margin-top: 30px; position: relative; cursor: pointer; } div.downs .listss li span{ display:block; position: absolute; left: 0px; top: 0px; width: 0; height: 100%; background-color: #235ba7; border-radius: 10px; transition: all 0.5s cubic-bezier(0.71, -0.01, 0.07, 0.99) 0s; -webkit-transition: all 0.5s cubic-bezier(0.71, -0.01, 0.07, 0.99) 0s; z-index: 1; } div.downs .listss li:hover span{ width: 100%; } div.downs .listss li:hover p{ color: #fff; position: absolute; z-index: 2; transition:all 0.5s; } div.downs .listss li .pic{ position: absolute; top:50%; transform:translateY(-50%); left:10%; z-index: 1; } div.downs .listss li .pic .no{ display:none; } div.downs .listss li:hover .pic img{ display:none; } div.downs .listss li:hover .pic img.no{ display:block; } div.downs .listss li:nth-child(odd){ margin-left: 0; } div.downs .listss li p{ line-height:88px; margin-left: 19.4%; } @media only screen and (max-width: 750px) { div.up .ups ul { height: 850px; margin: 55px 0; } div.up .ups ul li{ width: 268px; height: 268px; position: absolute; top:0; left:0; z-index: 1; background:url(../images/01.png) center no-repeat; background-size: cover; } div.up .ups ul li:nth-child(2){ top:0; left:50%; background:url(../images/02.png) center no-repeat; background-size: cover; } div.up .ups ul li:nth-child(3){ top:288px; left:0%; background:url(../images/03.png) center no-repeat; background-size: cover; } div.up .ups ul li:nth-child(4){ top:288px; left:50%; background:url(../images/04.png) center no-repeat; background-size: cover; } div.up .ups ul li:nth-child(5){ top:576px; left:50%; transform:translateX(-50%); background:url(../images/05.png) center no-repeat; background-size: cover; } div.downs .listss li{ width: 100%; margin-left: 0; } } @media only screen and (max-width: 579px) { div.up .ups ul{ height: 1400px; } div.up .ups ul li{ position: absolute; top:0; left:50%; transform:translateX(-50%); } div.up .ups ul li:nth-child(2){ top:288px; left:50%; transform:translateX(-50%); } div.up .ups ul li:nth-child(3){ top:576px; left:50%; transform:translateX(-50%); } div.up .ups ul li:nth-child(4){ top:864px; left:50%; transform:translateX(-50%); } div.up .ups ul li:nth-child(5){ top:1152px; left:50%; transform:translateX(-50%); } div.downs .listss li{ width: 100%; margin-left: 0; } div.downs .listss li .pic{ left:6%; } div.downs .listss li p{ margin-left: 20%; } } /*service-end*/ /*join*/ div.join ul{ margin-top: 30px; } div.join li{ width: 100%; height: 69px; line-height: 69px; border-bottom: 1px solid #ececec; background: #fff; } div.join li:hover{ background: #f9f9f9; } div.join li.invit-title { background: #f9f9f9; } div.join span{ display: block; width: 250px; font-size: 18px; color: #333; float: left; text-align: center; line-height: 69px; } div.join span.num{ width: 330px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div.join span a{ display: inline-block; width: 110px; cursor: pointer; height: 28px; border: 1px solid #999; text-align: center; font-family: "MicrosoftYaHei"; font-weight: Regular !important; line-height: 28px; } div.join span a:hover { background: #333 !important; color: #fff; text-decoration: none; border-radius: 2px; }