/******banner******/ .banner_wrap{width: 100% !important; height: auto; position: relative;} .banner_wrap p{overflow: hidden; width: 100%;} .banner_wrap>p>img{display: block; width: 100%; visibility: hidden;} .banner{width: 100%; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -50%;} .banner li{width: 100%; height: 100%; float: left; position: absolute; top: 0; left: 50%; margin-left: -50%; overflow: hidden;} .banner li.on{z-index: 10;} .banner li a{display: block; width: 100%;position: relative; overflow: hidden;} .banner li a>img{width: 100%; display: block;} .item{position: absolute; bottom: 3.8%; text-align: center; width: 100%;z-index: 125;} .item a{display: inline-block; width: 3%; height: 8px; margin: 0 7.5px; -webkit-border-radius: 15px;-moz-border-radius: 15px;-ms-border-radius: 15px;-o-border-radius: 15px;border-radius: 15px; background: rgba(255,255,255,.8);-webkit-transition: background .5s;-moz-transition: background .5s;-ms-transition: background .5s;-o-transition: background .5s;transition: background .5s;} .item .cur{background: rgba(138,19,9,.8);} .flex-item a{display: inline-block; width:100%; height:auto; -webkit-border-radius: 15px;-moz-border-radius: 15px;-ms-border-radius: 15px;-o-border-radius: 15px;border-radius: 15px; background: rgba(255,255,255,.8);-webkit-transition: background .5s;-moz-transition: background .5s;-ms-transition: background .5s;-o-transition: background .5s;transition: background .5s;} .banner ul li .banner1_main{position: absolute; width: 36%; left: 50%;margin-left: -18%; top: 30%; text-align: center; padding-top: 2.5%;} .banner ul li .banner1_main>img{ position: relative; z-index: 3;-khtml-opacity:0;-moz-opacity:0;filter:alpha(opacity=0);filter:"alpha(opacity=0)";opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);} .banner ul li .banner1_main>img.banner1_g{width: 98%;position: absolute; top: -100%; left: -60%; z-index: 1;-webkit-transition: all 1.2s .2s;-moz-transition: all 1.2s .2s;-ms-transition: all 1.2s .2s;-o-transition: all 1.2s .2s;transition: all 1.2s .2s;} .banner ul li .banner1_main>img.banner1_f{width: 98%;position: absolute; top: 100%; right: -60%; z-index: 2;-webkit-transition: all 1.2s .2s;-moz-transition: all 1.2s .2s;-ms-transition: all 1.2s .2s;-o-transition: all 1.2s .2s;transition: all 1.2s .2s;} .banner ul li .banner1_main>img.banner1_e{width: 84.5%; margin-top: 2%; top: 700px;-webkit-transition: all 1.2s 1.6s;-moz-transition: all 1.2s 1.6s;-ms-transition: all 1.2s 1.6s;-o-transition: all 1.2s 1.6s;transition: all 1.2s 1.6s;} .banner ul li .banner1_main>img.banner1_d{width:auto; display: block; margin: 4% auto; top: 400px;-webkit-transition: all 1.2s 1.4s;-moz-transition: all 1.2s 1.4s;-ms-transition: all 1.2s 1.4s;-o-transition: all 1.2s 1.4s;transition: all 1.2s 1.4s;} .banner ul li .banner1_main>img.banner1_c{width: 1.88%; margin: 2% 3%; -webkit-transform: -webkit-scale(0);-moz-transform: -moz-scale(0);-ms-transform: -ms-scale(0);-o-transform: -o-scale(0);transform: scale(0);-webkit-transition: all 1.2s 1.2s;-moz-transition: all 1.2s 1.2s;-ms-transition: all 1.2s 1.2s;-o-transition: all 1.2s 1.2s;transition: all 1.2s 1.2s;} .banner ul li .banner1_main>img.banner1_b{width: 23.4%;-webkit-transform: -webkit-scale(0);-moz-transform: -moz-scale(0);-ms-transform: -ms-scale(0);-o-transform: -o-scale(0);transform: scale(0);-webkit-transition: all 1.2s .8s;-moz-transition: all 1.2s .8s;-ms-transition: all 1.2s .8s;-o-transition: all 1.2s .8s;transition: all 1.2s .8s;} .banner ul li .banner1_main>img.banner1_a{width: 23.4%;-webkit-transform: -webkit-scale(0);-moz-transform: -moz-scale(0);-ms-transform: -ms-scale(0);-o-transform: -o-scale(0);transform: scale(0);-webkit-transition: all 1.2s .8s;-moz-transition: all 1.2s .8s;-ms-transition: all 1.2s .8s;-o-transition: all 1.2s .8s;transition: all 1.2s .8s;} .banner ul li.on .banner1_main>img{-khtml-opacity:1;-moz-opacity:1;filter:alpha(opacity=100);filter:"alpha(opacity=100)";opacity:1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);} .banner ul li.on .banner1_main>img.banner1_g{top: 0; left: 0; } .banner ul li.on .banner1_main>img.banner1_f{top: 5%; right: 0; } .banner ul li.on .banner1_main>img.banner1_a,.banner ul li.on .banner1_main>img.banner1_b,.banner ul li.on .banner1_main>img.banner1_c{-webkit-transform: -webkit-scale(1);-moz-transform: -moz-scale(1);-ms-transform: -ms-scale(1);-o-transform: -o-scale(1);transform: scale(1);} .banner ul li.on .banner1_main>img.banner1_d,.banner ul li.on .banner1_main>img.banner1_e{top: 0;} .banner ul li .banner2_main{position: absolute; top: 33%; width: 62%; left: 50%; margin-left: -31%;} .banner ul li .banner2_main>img{display: block; position: relative;-khtml-opacity:0;-moz-opacity:0;filter:alpha(opacity=0);filter:"alpha(opacity=0)";opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);} .banner ul li .banner2_main>img.banner2_a{width: 36.53%; margin-bottom: 2%; right: -50%; -webkit-transition: all 1.2s .2s;-moz-transition: all 1.2s .2s;-ms-transition: all 1.2s .2s;-o-transition: all 1.2s .2s;transition: all 1.2s .2s;} .banner ul li .banner2_main>img.banner2_b{width: 19.53%; margin-bottom: 2%; right: -60%;-webkit-transition: all 1.2s .4s;-moz-transition: all 1.2s .4s;-ms-transition: all 1.2s .4s;-o-transition: all 1.2s .4s;transition: all 1.2s .4s;} .banner ul li .banner2_main>img.banner2_c{width: 44.5%; margin-bottom: 2%; right: -70%;-webkit-transition: all 1.2s .6s;-moz-transition: all 1.2s .6s;-ms-transition: all 1.2s .6s;-o-transition: all 1.2s .6s;transition: all 1.5s .6s;} .banner ul li .banner2_main>img.banner2_d{width: 40%; right: -80%;-webkit-transition: all 1.2s .8s;-moz-transition: all 1.2s .8s;-ms-transition: all 1.2s .8s;-o-transition: all 1.2s .8s;transition: all 1.2s .8s;} .banner ul li.on .banner2_main>img{-khtml-opacity:1;-moz-opacity:1;filter:alpha(opacity=100);filter:"alpha(opacity=100)";opacity:1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); right: 0; } @media screen and (max-width: 767px){ .banner li a>img,.banner_wrap>p>img{width: 120%; margin-left: -10%;} .banner ul li .banner1_main{width: 55%; top: 20%; margin-left: -27.5%; padding-top: 4.5%;} .banner ul li .banner2_main{width: 60%;top: 25%; left:20%; margin-left: 0;} .banner ul li .banner2_main>img.banner2_a{width: 88%;} .banner ul li .banner2_main>img.banner2_b{width: 45%;} .banner ul li .banner2_main>img.banner2_c{width: 100%;} .banner ul li .banner2_main>img.banner2_d{width: 90%;} } @media screen and (max-width: 550px){ .banner li a>img,.banner_wrap>p>img{width: 140%; margin-left: -20%;height:310px !important; } .banner ul li .banner1_main{width: 80%; top: 16%;margin-left: -40%; padding-top: 5.5%;} .banner ul li .banner2_main{width: 60%;top: 25%; left:20%;} } /****金融产品与服务*****/ .serve{width: 100%; height: auto;} .se_title{background-color: #fbfaf6; height: 360px; padding-bottom: 15px;} .se_title_main{height: 340px;background-image: url(../images/serve_bg.png);background-position: right bottom; background-repeat: no-repeat; background-size: 30%;padding: 60px 27% 80px 13%;} .se_title_main h3{font-size: 36px;font-weight: bold;color: #313131; margin-bottom: 25px;} .se_title_main p{font-size: 14px;color: #818180;line-height: 24px;} .se_list li{} .se_list li a{display: block; width: 100%; height: 180px; overflow: hidden; padding: 52.5px 4%; position: relative;} .se_list li a .se_bg{position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;-khtml-opacity:0;-moz-opacity:0;filter:alpha(opacity=0);filter:"alpha(opacity=0)";opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); -webkit-transform: -webkit-scale(0);-moz-transform: -moz-scale(0);-ms-transform: -ms-scale(0);-o-transform: -o-scale(0);transform: scale(0);background: url(../images/se_listbg1.jpg) no-repeat center; background-size: cover;-webkit-transition: all .5s .1s;-moz-transition: all .5s .1s;-ms-transition: all .5s .1s;-o-transition: all .5s .1s;transition: all .5s .1s;} .se_list li+li a .se_bg{background: url(../images/se_listbg2.jpg) no-repeat center; background-size: cover;} .se_list li+li+li a .se_bg{background: url(../images/se_listbg3.jpg) no-repeat center; background-size: cover;} .se_list li+li+li+li a .se_bg{background: url(../images/se_listbg4.jpg) no-repeat center; background-size: cover;} .se_list li+li+li+li+li a .se_bg{background: url(../images/se_listbg5.jpg) no-repeat center; background-size: cover;} .se_list li+li+li+li+li+li a .se_bg{background: url(../images/se_listbg6.jpg) no-repeat center; background-size: cover;} .se_list li a .se_icon{position: relative;z-index: 3;-webkit-transition: all .5s .1s;-moz-transition: all .5s .1s;-ms-transition: all .5s .1s;-o-transition: all .5s .1s;transition: all .5s .1s;} .se_list li a .se_right{position: relative;z-index: 3;-webkit-transition: all .5s .1s;-moz-transition: all .5s .1s;-ms-transition: all .5s .1s;-o-transition: all .5s .1s;transition: all .5s .1s;} .se_list li a .se_right h5{font-size: 22px;font-weight: bold;color: #313131; -webkit-transition: all .5s .1s;-moz-transition: all .5s .1s;-ms-transition: all .5s .1s;-o-transition: all .5s .1s;transition: all .5s .1s;} .se_list li a .se_right p{font-size: 13px;color: #818180; height: 20px; overflow: hidden;-webkit-transition: all .5s .1s;-moz-transition: all .5s .1s;-ms-transition: all .5s .1s;-o-transition: all .5s .1s;transition: all .5s .1s;} .se_list li a:hover{} .se_list li a:hover .se_bg{-khtml-opacity:1;-moz-opacity:1;filter:alpha(opacity=100);filter:"alpha(opacity=100)";opacity:1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);-webkit-transform: -webkit-scale(1);-moz-transform: -moz-scale(1);-ms-transform: -ms-scale(1);-o-transform: -o-scale(1);transform: scale(1);} .se_list li a:hover .se_icon{width: 0; overflow: hidden; padding: 0;} .se_list li a:hover .se_right{width: 100%;} .se_list li a:hover .se_right h5{color: #fff;} .se_list li a:hover .se_right p{color: #fff; /*height: 40px;*/} .se_list li+li+li+li+li+li a:hover .se_icon{width: auto;/*padding-right: 15px;padding-left: 15px;*/} .se_list li+li+li+li+li+li a:hover .se_right{width: initial;} /********公司概况***********/ .about{width: 100%; height: auto; text-align: center; padding: 50px 0 40px 0; background: url(../images/about_bg.jpg) no-repeat center bottom;-webkit-transition: background-size .5s;-moz-transition: background-size .5s;-ms-transition: background-size .5s;-o-transition: background-size .5s;transition:background-size .5s;} /*.about:hover{background-size: 102%;}*/ .about h2{font-size: 36px; font-weight: bold;color: #fff;} .about p{font-size: 14px; color: #fff;margin: 16px auto 26px auto;} .more{position: relative;display: inline-block; padding:6px 10%; text-transform: uppercase;overflow: hidden;border: 1px solid #fff; -webkit-border-radius: 25px;-moz-border-radius: 25px;-ms-border-radius: 25px;-o-border-radius: 25px;border-radius: 25px;-webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;} .more span{color: #fff;font-size: 15px; position: relative;z-index: 2;} .more:before{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg);border-style: solid;border-width: 0 0 0 0;border-color: #501712 transparent transparent transparent; position: absolute; top: 0;left: 0; z-index: 1;-webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;} .more:hover{border: 1px solid #501712;} .more:hover span{color: #fff;} .more:hover:before {border-width: 430px 430px 0 0;} /****news****/ .news_wrap{background: #fbfaf6;padding-bottom: 60px;} .news_wrap{ height: auto; overflow: hidden; margin: 0 auto; padding-top: 50px; text-align: center;} .news_wrap h2{font-size: 36px;color: #313131; font-weight: bold;} /*.tempWrap{*/ /*overflow: hidden;*/ /*width: 100%;*/ /*max-height: 700px!important;*/ /*}*/ .news_main{ height: auto; overflow: hidden;margin-top: 35px;} .bd { position: relative; overflow: hidden; } .bd .pic{ width: 100%!important; height: 440px!important; } .bd .pic li{ width: 100%!important; height: 440px!important; } .bd .pic a{display: block; width: 100%; position: relative;} .bd .pic img {width: 100%; display: block;-webkit-transition: .8s;-moz-transition: .8s;-ms-transition: .8s;-o-transition: .8s;transition: .8s; } .bd .pic a:hover img{-webkit-transform: scale(1.06);-moz-transform: scale(1.06);-ms-transform: scale(1.06);-o-transform: scale(1.06);transform: scale(1.06);} .bd .pic a span{display: block; width: 72px; height: 64px; background: rgba(149,96,52,.8); color: #fff; font-size: 18px; line-height: 64px; text-align: center; position: absolute; z-index: 3; top: 0px; left: 0;} .bd .pic a p{text-align: center; overflow: hidden; white-space: nowrap;text-overflow: ellipsis; height: 70px; line-height: 70px; font-size: 18px;color: #5d5d5d; background: #fff; padding: 0 40px 0 10px;} .news_wrap .more{border: 1px solid #dcdcdc; margin-top: 20px} .news_wrap .more span{color: #414040;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} .news_wrap .more:hover span{color: #fff;} #ifocus {width: 100%;margin: 5% auto;} #ifocus_btn li.on:before{left: 0;transition: 0.5s} #ifocus_btn li.on .nes_title{color: #fff;} #ifocus_btn li.on .nes_title:before{left: -100%;} #ifocus_btn li.on .news_center h4{color: #fff;} #ifocus_btn li.on .news_center p{color: #fff;} #ifocus_btn li{ height: auto;margin-bottom: 17px;overflow: hidden;} #ifocus_btn li{display: block; width: 100%; height: auto; position: relative; overflow: hidden;} #ifocus_btn li:before{content: ''; width: 100%; height: 100%; position: absolute; background: #8a1309; top: 0; left: -100%;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s; } #ifocus_btn li .nes_title{width: 24%; height: auto; text-align: center; overflow: hidden; font-size: 14px; line-height: 36px; color: #a4a4a4;background: transparent; float: left;padding-top: 14px; padding-bottom: 5px;position: relative;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s; } #ifocus_btn li .nes_title:before{content: ''; position: absolute; top: 0; left: 0; z-index: 1;width: 100%; height: 100%; background: #ddc49c;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s; } #ifocus_btn li .nes_title b{display: block;font-size: 36px;position: relative;z-index: 2; color: #fff;} #ifocus_btn li .nes_title span{position: relative;z-index: 2; color: #fff;} #ifocus_btn li .news_center{width: 71%; height: auto; float: right; position: relative;z-index: 3; text-align: left;} #ifocus_btn li .news_center h4{font-size: 16px; font-weight: bold;color: #353535; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; -webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s; } #ifocus_btn li .news_center p{font-size: 13px; line-height: 24px; color: #636363; margin-top: 5px; margin-bottom: 0; height: 48px; overflow: hidden;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} #ifocus_btn li.on:before{left: 0;} #ifocus_btn li.on .nes_title{color: #fff;} #ifocus_btn li.on .nes_title:before{left: -100%;} #ifocus_btn li.on .news_center h4{color: #fff;} #ifocus_btn li.on .news_center p{color: #fff;} @media screen and (max-width: 1200px){ .bd .pic{ width: 100%!important; height: 700px!important; } .bd .pic li{ width: 100%!important; height: 700px!important; } } @media screen and (max-width: 1000px){ .bd .pic{ width: 100%!important; height: 550px!important; } .bd .pic li{ width: 100%!important; height: 550px!important; } } @media screen and (max-width: 730px){ .bd .pic{ width: 100%!important; height: 480px!important; } .bd .pic li{ width: 100%!important; height: 480px!important; } } @media screen and (max-width: 650px){ .bd .pic{ width: 100%!important; height: 440px!important; } .bd .pic li{ width: 100%!important; height: 440px!important; } } @media screen and (max-width: 550px){ .bd .pic{ width: 100%!important; height: 380px!important; } .bd .pic li{ width: 100%!important; height: 380px!important; } } @media screen and (max-width: 500px){ .bd .pic{ width: 100%!important; height: 320px!important; } .bd .pic li{ width: 100%!important; height: 320px!important; } } @media screen and (max-width: 420px){ .bd .pic{ width: 100%!important; height: 280px!important; } .bd .pic li{ width: 100%!important; height: 280px!important; } } @media screen and (max-width: 400px){ .bd .pic{ width: 100%!important; height: 250px!important; } .bd .pic li{ width: 100%!important; height: 250px!important; } } @media screen and (max-width: 350px){ .bd .pic{ width: 100%!important; height: 220px!important; } .bd .pic li{ width: 100%!important; height: 220px!important; } } @media screen and (max-width: 550px){ .news{padding-top: 20px;} } /* 本例子css */ .foucebox { position:relative; max-width:1200px; width: 100%; overflow:hidden; margin: 5% auto; } .foucebox .bd { position:relative; overflow:hidden; width: 100%; } .foucebox .bd img { width: 100%!important; }