.header{ position: fixed; background: #ffffff; z-index: 999; } .section_1{ background: no-repeat scroll center 0; background-size: cover; } .section_2{ background: no-repeat scroll center 0; background-size: cover; } .section_3{ background: repeat-y scroll center 0; background-size: cover; } .section_4{ background: no-repeat scroll center -180px; background-size: cover; } #fp-nav { /*background: #000000; opacity: 0.7;*/ border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; } #fp-nav ul, .fp-slidesnav ul { width: 35px; padding: 10px 2px 10px 2px; } #fp-nav ul li, .fp-slidesnav ul li { width: 24px; margin: 10px 10px 10px -2px; } #fp-nav ul li .gotop { display: inline-block; width: 32px; height: 24px; color: #535353; background: no-repeat -7px 0; padding-top: 10px; margin-left: 12px; } #fp-nav.right { right: 20px; } #fp-nav ul li .fp-tooltip { width: auto; opacity: 1; display: none; font-size: 12px; font-weight: bolder; background: rgb(0, 160, 210); padding: 5px 10px 5px 10px; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; top: -7px; } #fp-nav ul li { /*right: 4px;*/ } #fp-nav ul li a span, .fp-slidesnav ul li a span { width: 12px; height: 12px; border: 3px solid #879eac; margin-left: 16px; } #fp-nav ul li a.active .fp-tooltip { display: block; } #fp-nav ul li a.active { /*background: no-repeat 4px -13px;*/ } #fp-nav ul li a.active span, .fp-slidesnav ul li a.active span { background: #879eac; height: 28px; border-radius: 10px; } /*前三屏*/ .section_1{ background: no-repeat scroll center 0; background-size: cover; } .section_2{ background: no-repeat scroll center 0; background-size: cover; } .section_3{ background: no-repeat scroll center 0; background-size: cover; } /* 轮播图 */ /* .index_banner{width:100%;} .inx{width:100%; height: 100%; margin:0 auto; position:relative;z-index:1; overflow:hidden;} .inx .swiper-wrapper{width:100%; height:100%; overflow:hidden;} .inx .swiper-slide{width:100%;height: 100%;} .inx .item_list{ position:relative; display:block;} .inx .item_list img{width:100%; display:block;} .inx .arrow-right{ width:64px; height:64px;display:block; position:absolute;right:2%; top:50%; z-index:99999;margin-top:-32px; cursor:pointer; outline:none; filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6;opacity: 0.6;} .inx .arrow-right:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;} .inx .arrow-left{ width:64px; height:64px;display:block; position:absolute;left:2%; top:50%; z-index:99999;margin-top:-32px; cursor:pointer; outline:none; filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6;opacity: 0.6;} .inx .arrow-left:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;} .paginationall{ width:100%; margin:0; text-align:center; display: none;} .paginationall .pagination{ margin:15px 0 10px; overflow:hidden; } .pagination>li{ width:26px; height:26px; line-height:70px; margin:0 5px; background: url(/uploads/image/sgraiicon/icon_dd.png) no-repeat; border-radius: 50%; display:block; cursor:pointer; float:left;} .pagination li.on{background: url(/uploads/image/sgraiicon/icon_hd.png) no-repeat;} */ .device{width:100%; height:100%; position:relative;z-index:0; clear:both; overflow:hidden;} .device .swiper-wrapper{ width:100%; height:100%; overflow:hidden;} .device .swiper-slide{ width:100%; height:100%;} .device .swiper-slide img{ width:100%; height:100%; display:block;} .device .swiper-slide .info { width:100%;text-align:center; position:absolute; top:35%; left:45%; margin-left: -26.25%; z-index:2;} .device .swiper-slide .info h2{line-height:60px; color:#fff; font-size:48px; font-size:4.8rem; font-weight:100;margin-bottom: 2%; text-align: left;} .device .swiper-slide .info h3{line-height:30px; text-align: left;} .device .swiper-slide .info h3 a{display:inline-block; padding:0.5% 2%; color:#fff; border: 1px solid #fff; font-size:18px; font-size:1.8rem; font-weight:700; } .device .swiper-slide .info h3 a span{font-size: 18px; font-size: 1.8rem; color:#fff; margin-left: 30px; display: inline-block;} /* .device .arrow-left{display:block; position:absolute; left:3.6%; top:50%; margin-top:-1%; cursor:pointer; z-index:99999;} .device .arrow-right{display:block; position:absolute;right:3.6%; top:50%; margin-top:-1%; cursor:pointer; z-index:99999;} */ .device .pagination{ position:absolute; bottom:4%; left:50%; margin-left:-70px; z-index:1; display:block;} .device .pagination span{ width:10px; height:10px; margin:0 5px; background:none; border:1px solid #fff; border-radius:50%; display:block; cursor:pointer; float:left;} .device .pagination .swiper-active-switch{ background:#fff;} .device .paginationall{ width:100%; margin:0; text-align:center; display: block;} /* .device .paginationall .pagination{ margin:15px 0 10px; overflow:hidden; } */ .device .pagination>li{ width:26px; height:26px; line-height:600px; margin:0 5px; background: no-repeat;background-size: cover; border-radius: 50%; display:block; cursor:pointer; float:left;} .device .pagination li.on{background: no-repeat;background-size: cover;} .banner_size{ background:url(/uploads/image/sgraimages/index_banner01.jpg) no-repeat center; }.banner_size1{ background:url(/uploads/image/sgraimages/index_banner02.jpg) no-repeat center; }.banner_size2{ background:url(/uploads/image/sgraimages/index_banner03.jpg) no-repeat center; } .banner_size3{ background:url(/uploads/image/sgraimages/index_banner05.jpg) no-repeat center; } .banner_size4{ background:url(/uploads/image/sgraimages/index_banner03.jpg) no-repeat center; } /* 新闻 */ .section_1 h3,.section_2 h3,.section_3 h3,.section_4 h3{ /* margin-top: 10%; */ text-align: center; font-size: 32px; font-size: 3.2rem; color:#3f3f3f; } .section_1 h3 p,.section_2 h3 p,.section_3 h3 p,.section_4 h3 p{ text-align: center; font-size: 24px; font-size: 2.4rem; color:#3f3f3f; font-weight: bold; } /* iphone隐藏 */ .section_1 h3{ margin-top: 3%; } .news_pc_in{ width:1000px; overflow: hidden; margin:2% auto 0; } .news_left .news_img{ width:285px; height: 260px; float: left; background: no-repeat; background-size: cover; } .news_img p{ margin:18px 0 0 0; line-height: 26px; font-size: 14px; font-size: 1.4rem; color:#fff; } .ul_center{ width:600px; height: 260px; float: left; background: #fff no-repeat right 24px; } .ul_center h3{ font-size: 23px; font-size: 2.3rem; color:#3f3f3f; margin-top: 25px; margin-bottom: 2%; padding-bottom: 12px; margin-left: 35px; text-align: left; background: no-repeat left bottom; } .ul_center ul{ margin-top:15px; margin-left: 35px; margin-right: 35px; } .ul_center ul li{ padding-left: 20px; background: no-repeat left 6px; } .ul_center ul li a{ font-size: 14px; font-size: 1.4rem; color:#3f3f3f; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; width: 103%; } .ul_center ul li span{ float: right; font-size: 12px; font-size: 1.2rem; text-align:right; display:inline-block; width:90px; } .text_right{ width:115px; height: 260px; text-align: center; font-size: 18px; font-size: 1.8rem; font-weight: bold; float:left; background: #0060aa; } .text_right h3{ font-size: 18px; font-size: 1.8rem; font-weight: bold; text-align: center; margin-top:25px; color:#fff; } .news_right{ margin-top: 1px; } .news_right .text_right{ background: #00a0d2; } .news_right .news_img{ width:285px; height: 260px; float: left; background: no-repeat; background-size: cover; } .news_right .news_img{ background: no-repeat; background-size: cover; } .news_right .news_img p{ text-align: right; line-height: 24px; margin-right: 24px; } .news_right .ul_center{ background: #fff no-repeat left 24px; } .news_left .ul_center{ background: #fff no-repeat right 24px; } /* iphone隐藏 */ /* iphone显示 */ .index_tab { margin: 0 auto; overflow: hidden; width: 96%; background: #fff; display: none; } .index_tab .turn_tit { background: #f9f9f9; display: inline-block; /* line-height: 56px; */ width: 100%; } .index_tab .turn_tit li{ color: #3f3f3f; cursor: pointer; float: left; font-size: 20px; font-size: 2.0rem; text-align: center; width: 50%; padding:4% 0; background: #f9f9f9; margin:0; } .index_tab .turn_tit li.t_current{ color:#00a0d2; background: #fff repeat-x bottom center; } .index_tab .turn_ins { margin-top:0; padding:3% 3% 2% 3%; width: 100%; background: #fff; } .index_tab .turn_ins ul li{ padding-left: 20px; background: no-repeat left 5px; } .index_tab .turn_ins ul li a{ font-size: 14px; font-size: 1.4rem; color:#3f3f3f; line-height: 35px; } .index_tab .turn_ins ul li span{ float: right; font-size: 12px; font-size: 1.2rem; } /* iphone显示 */ /* 可持续发展 */ .section_tl{ margin: 5% auto 0 auto; width:1000px; } .section_tl ul li{ float: left; width:20.5%; margin-right:6%; } .section_tl ul li.li_mrn{ margin-right: 0; } .section_tl ul li a{ display: block; position: relative; } .section_tl ul li a > img{ width:100%; display: block; } .pic_cover{ width:100%; height: 100%; position: absolute; top:0; left: 0; background: rgba(255,255,255,0.2); display: none; } .section_tl ul li a:hover .pic_cover{ display: block; } .pic_cover_img { text-align: center; } .section_tl ul li a:hover .pic_cover_img img{ max-width: 100%; position: absolute; top:50%; margin-top: -27px; left: 50%; margin-left: -27px; z-index: 99; } .section_tl ul li a:focus .pic_cover_img img{ max-width: 100%; position: absolute; top:50%; margin-top: -27px; left: 50%; margin-left: -27px; z-index: 99; } .section_tl ul li p{ font-size: 18px; font-size: 1.8rem; color:#869fac; font-weight: bold; text-align: center; padding:2% 0; } /*前三屏*/ /*后两屏*/ .businessbankcover{ width: 1040px; margin:120px auto 0; } .businessbank{ width: 100%; } .businessbank li{ display: inline-block; float: left; margin-right: 20px; width: 245px; height:245px; text-align: center; background: no-repeat center; } .businessbank li h4{ color: #475e6a; font-weight: bold; font-size: 24px; font-size: 2.4rem; line-height: 40px; } .businessbank li img{ margin: 70px auto 0; } .businessbank li img.hovericon{ display: none; } .businessbank li.select h4{ color: #fff; } .businessbank li.select img.commonicon{ display: none; } .businessbank li.select img.hovericon{ display: block; } .businessbank li.select.bank-1{ background: no-repeat center; background-size: 100%; } .businessbank li.select.bank-2{ background: no-repeat center; background-size: 100%; } .businessbank li.select.bank-3{ background: no-repeat center; background-size: 100%; } .businessbank li.select.bank-4{ background: no-repeat center; background-size: 100%; } .businessbank li.bank-right-gap{ margin-right: 0; } .proandservertitle{ margin-top: 140px; } .proandserver{ width: 1000px; margin:30px auto 80px; } .pro-changelisttab{ width: 920px; margin:55px auto 0; color: #fff; } .pro-changelisttab li{ display: inline-block; float: left; height:40px; width: 50%; background: #c7d6df; text-align: center; line-height: 40px; font-size: 18px; font-size: 1.8rem; font-weight: bold; cursor:pointer; } .pro-changelisttab li.tab-select{ background: #8aa0ae; } .protabchange{ margin:30px auto 0; position: relative; display: none; } .protabchange a.leftmoveclick,.protabchange a.rightmoveclick{ display: inline-block; position: absolute; width:26px; height: 46px; z-index: 4; top:115px; } .protabchange a.leftmoveclick{ background: no-repeat center; left: -6px; } .protabchange a.rightmoveclick{ background: no-repeat center; right: -5px; } .movecover{ width: 920px; height:300px; overflow: hidden; position: relative; margin: 0 auto; } .movecover ul{ width: 6000px; position: absolute; } .movecover ul li{ display: inline-block; float: left; margin-right: 30px; width: 287px; height:370px; background: #fff; } .movecover ul li img{ width: 100%; height:234px; } .movecover ul li h5{ text-align: center; height: 50px; line-height: 50px; color: #333; font-size: 18px; font-size: 1.8rem; font-weight: bold; } .movecover ul li p{ text-align: center; height: 30px; line-height: 30px; color: #333; font-size: 14px; } /*后两屏*/ @media screen and (max-width: 1440px) { .iphone_img{ height:200px; overflow: hidden; } .movecover ul li{ height:234px; } .movecover{height:234px;} .section_3 h3 { margin-top: 10%; } /* .section_2 .fp-tablecell h3{ margin-top: 6%; } */ .section_2 h3 { margin-top: 6%; } .proandserver { margin: -41px auto 10px; } .movecover ul li h5 { height: 30px; line-height: 30px; } .footer .footer_top { width: 100%; height:50px; background: rgb(135, 158, 172); } .footer .footer_top .footer_top_body .footer_logo { float: left; margin-top: 12px; } .footer .footer_top .footer_top_body .footer_nav{ margin-top: 16px; } } @media screen and (max-width: 1366px) { .device .swiper-slide .info { width:100%;text-align:center; position:absolute; top:33%; left:35%; margin-left: -26.25%; z-index:2;} .iphone_img{ height:200px; overflow: hidden; } .movecover ul li{ height:234px; } .movecover{height:234px;} .ul_center h3 { margin-top: 2%; margin-bottom: 0; padding-bottom: 10px; } .ul_center ul li a { line-height: 30px; width: 100%; overflow: hidden; height: 22px; display: inline-block; text-overflow: ellipsis; white-space: nowrap; } .news_img, .ul_center, .text_right { height: 180px; } .news_left .news_img, .news_right .news_img { height: 180px; background-size:cover; } .section_1 h3, .section_2 h3, .section_3 h3, { margin-top: 3%; } .section_1 h3 { margin-top: 10%; } .section_1 .ul_center h3 { margin-top: 2%; } .section_4 h3.proandservertitle { margin-top: 11%; } .protabchange { margin-top: 5px; } .section_3 h3 { margin-top: 10%; } .proandserver { margin: -41px auto 10px; } .movecover ul li h5 { height: 30px; line-height: 30px; } .businessbankcover{ width: 1040px; margin:90px auto 0; } .footer .footer_top .footer_top_body .footer_logo { float: left; margin-top: 12px; } .footer .footer_top .footer_top_body .footer_nav{ margin-top: 16px; } .protabchange a.leftmoveclick, .protabchange a.rightmoveclick{ top:80px; } } /*pad单独样式 <1000px分辨率 and (min-width: 960px)*/ @media screen and (max-width: 999px) { html{ font-size: 52.5%; } .device .paginationall{ display: block; } .container .container_body .section .section_body{ width:100%; } .section_tl{ margin:0 3%; } .section_tl ul li{ float: left; width:49%; margin-right:2%; margin-bottom: 4%; } .section_tl ul li.li_mrn_e{ margin-right: 0; } .section_tl{ margin:0 2%; width:96%; } .section_2{ background:#fff; } .section_tl ul li{ border: 1px solid #e0e0e0; } .section_tl ul li p{ font-size: 18px; font-size: 1.8rem; color:#869fac; font-weight: bold; text-align: center; padding:2% 0; background: #f3f3f3; } .section_1 h3,.section_2 h3,.section_3 h3,.section_4 h3{ margin:0 auto 8% auto; padding-top: 55px; text-align: center; font-size: 32px; font-size: 3.2rem; color:#3f3f3f; } .section_1{ padding-bottom: 100px; } .index_tab{ display: block; } .news_pc_in{ display: none; } .index_tab .turn_ins ul li a{ line-height: 26px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; } .index_tab .turn_ins ul li span{ margin-left:10px; } .index_tab .turn_ins ul li{ background: no-repeat left 5px; overflow:hidden; height:25px; } .section_1 h3 p, .section_2 h3 p, .section_3 h3 p, .section_4 h3 p{ display: inline-block; padding-left: 5px; } .device .swiper-slide .info{ width:96%; margin:0 auto; height: auto; text-align: left; position: absolute; bottom: 35%; left: 5%; z-index: 2; } .device .pagination{ bottom:-10px; } /*szl 修改start*/ .swiper-slide{ background-size:cover; } /*szl修改end*/ } @media screen and (max-width: 768px) and (min-width: 320px){ /* html{ font-size: 35.5%; } */ .device{height:220px;} .banner_size,.banner_size1,.banner_size2,.banner_size3,.banner_size4{ background-size:150%; } #dowebok{ margin-top:85px; } /*前三屏*/ .device .swiper-slide .info{ top:20%; } .device .swiper-slide .info h3{ line-height: 20px; } .device .swiper-slide .info h2{ line-height: 45px; font-size: 30px; font-size: 3.0rem; margin-bottom: 0; } .device .swiper-slide .info h3 a span{ margin-left: 10px; margin-right: 10px; } .device .swiper-slide .info h3 a{ padding:0.5% 1% 0.5% 2%; } .device .pagination>li{ width:16px; height: 16px; } /*前三屏*/ /*后两屏*/ .section_4 { background: no-repeat scroll center -384px; background-size: cover; } .businessbankcover{ width: 100%; } .businessbank li{ width: 50%; margin-right: 0; } .businessbankcover{ margin:0; } .proandserver{ margin:20px 0; width: 100%; } .pro-changelisttab{ width: 92%; margin:0 auto; } .section_4 h3.proandservertitle{ margin-top: 0; } .movecover{ width: 75%; margin:0 auto; height:345px; } .protabchange a.leftmoveclick, .protabchange a.rightmoveclick{ display: none; } .movecover ul li{ /*width: 17%;*/ height:290px; margin-top:30px; } .movecover ul li h5{ height: 60px; line-height: 60px; } .phone-round{ margin:10px 0; display:none; } .phone-round ul{ margin:0 auto; width: 30%; } .phone-round ul li{ display: inline-block; float: left; width: 30px; height:30px; background: no-repeat -32px center; } .phone-round ul li.onshow{ background-position: 0 center; } /*后两屏*/ } @media screen and (max-width: 320px){ .device {height:190px;} }