-凯发注册手机版官网

a,select,textarea,input,button,html,body,div,ul,li{ tap-highlight-color:transparent !important; } @keyframes rt{ to{ stroke-dashoffset:0; } } @keyframes animloadedheader{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);}} @font-face { font-family: "centurygothic-bold"; src: format("woff2"), format("woff"), format("truetype"), format("embedded-opentype"), format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "impact"; src: format("woff2"), format("woff"), format("truetype"), format("embedded-opentype"), format("svg"); font-weight: normal; font-style: normal; } .w1200{ width:1200px; margin-left:auto; margin-right:auto; @media(max-width:1400px){ width:1000px; } } .bold{ font-family: "centurygothic-bold"; } @keyframes wave{ 0%{ width: 0%; } 100%{ width:218px; } } @keyframes scaleupdown { from { -webkit-transform: scale(1.08); transform: scale(1.08); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } *{ outline:none; } .swiper-slide{ min-height:0 !important; } @keyframes rotate{ 0%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } 100%{ transform:rotate(-2deg); } } #welfare,#vision{ width:0; height: 0; position:relative; top:-100px; @media(max-width:1024px){ top:-50px; } } ::-webkit-input-placeholder { color:#666 !important; } :-moz-placeholder { color:#666 !important; } ::-moz-placeholder { color:#666 !important; } :-ms-input-placeholder { color:#666 !important; } @mixin opacity($opacity){ filter:alpha(opacity=$opacity*100); opacity:$opacity; } @mixin fz($fz,$lh){ font-size:$fz; line-height:$lh; } @mixin w($width){ width:$width; margin-left:auto; margin-right:auto; } @mixin float($float:left){ float:$float; } .top{ position:relative; top:50px; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1),background 0.5s; } } .bottom{ position:relative; top:-50px; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); } } .left{ position:relative; left:50px; @include opacity(0); &.animate{ left:0; @include opacity(1); transition:left 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); } } .right{ position:relative; left:-50px; @include opacity(0); &.animate{ left:0; @include opacity(1); transition:left 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); } } .ellipsis{ overflow: hidden; text-overflow:ellipsis; white-space:nowrap; } $color:#005bac; body{ width:100%; position:relative; min-width:1200px; overflow: hidden; } .w1100{ width:1100px; margin-left:auto; margin-right:auto; @media(max-width:1300px){ width:980px; } } .bocweb-header{ position:relative; left:0; width:100%; top:0; z-index:10; min-width:1200px; background: #fff; &.fixed{ position:fixed; z-index:1000; background: #fff; box-shadow:0 0 5px rgba(141, 141, 141, 0.2); .bocweb-logo{ img{ display: none; &.h{ display: inline-block; } } } .nav{ li{ >a{ color:#666; } } } } .bocweb-logo{ height:90px; line-height:90px; float:left; display: block; margin-left:45px; img{ display: none; &.h{ display: inline-block; } } } .hbg{ position:absolute; width:100%; height: 70px; background:#f1f1f1; top:90px; left:0; display: none; } .nav{ float: right; padding-right:10px; li{ margin-right:50px; float: left; position:relative; @media(max-width:1400px){ margin-right:30px; } &.active{ >a{ // font-weight:bold; i{ transform:scalex(1); transform-origin:left center; opacity:1\0; filter:alpha(opacity=100)\0; } } } &:hover{ >a{ i{ transform:scalex(1); transform-origin:left center; opacity:1\0; filter:alpha(opacity=100)\0; } } } >a{ @include fz(18px,90px); // color:#ffffff; color:#666; position:relative; display: block; i{ display: block; position:absolute; width:86px; left:50%; margin-left:-43px; transition:transform 0.4s ease,opacity 0.4s ease; height:6px; background: #f08200; top:0; transform:scalex(0); transform-origin:right center; transform:scalex(1)\0; opacity:0\0; filter:alpha(opacity=0)\0; @media(max-width:1300px){ width:50px; margin-left:-25px; } } } .slider{ width:1000px; position:absolute; left:0; top:90px; display: none; left:0%; &.tr{ text-align:right; right:0; left:auto; } // margin-left:-500px; a{ @include fz(16px,70px); color:#666; transition:color 0.3s; margin-right:55px; &:last-child{ margin-right:0; } @media(max-width:1240px){ margin-right:35px; } @media(max-width:1100px){ margin-right:25px; } &:hover{ color:$color; } } } } } .search{ width:80px; height:90px; background:url(/wbwimg/search.html) no-repeat center center #005bac; float: right; cursor:pointer; } } .w1500{ width:1500px; margin-left:auto; margin-right:auto; @media(max-width:1540px){ width:88%; } } .abanner{ overflow: hidden; position:relative; .img{ width:100%; height: auto; } .text_box{ width:1200px; height:100%; position:absolute; left:50%; margin-left: -600px; top:0; @media(max-width:1400px){ width:1000px; margin-left:-500px; } .tab{ width:100%; height:100%; display:table; .tab_cell{ display: table-cell; vertical-align: middle; .t{ @include fz(48px,78px); color:#fff; font-weight:bold; } .line{ width:30px; height: 3px; background: #fff; margin-top:12px; } .en{ @include fz(24px,34px); color:#fff; margin-top:24px; font-weight:bold; font-family:arial; text-transform:uppercase; } } } } .txt_box{ width:1200px; height:100%; position:absolute; left:50%; margin-left: -600px; top:0; @media(max-width:1400px){ width:1000px; margin-left:-500px; } &.business{ .tab{ .tab_cell{ .text{ padding:14px 65px; } } } } &.city{ .tab{ .tab_cell{ .text{ background:url(/wbwimg/11.html) no-repeat center center; background-size:cover; .i1{ background:url(/wbwimg/l11.html) no-repeat; top:-1px; } .i2{ background:url(/wbwimg/rr2.html) no-repeat; } } } } } .tab{ width:100%; height:100%; display:table; .tab_cell{ display: table-cell; vertical-align: middle; text-align: center; .timg{ img{ @media(max-width:1400px){ height: 100px; } @media(max-width:1300px){ height:80px; } } } .ds_img{ margin-top:28px; img{ @media(max-width:1400px){ height:40px; } @media(max-width:1300px){ height:20px; } } } .text{ margin-top:60px; width:100%; height: auto; background:url(/wbwimg/bg.html) no-repeat center center; background-size:cover; @include fz(24px,46px); color:#fff; padding:14px 25px; box-sizing:border-box; position:relative; @media(max-width:1400px){ @include fz(20px,36px); margin-top:40px; } @media(max-width:1300px){ margin-top:25px; @include fz(18px,32px); } .i1{ position:absolute; width:28px; height: 29px; background:url(/wbwimg/l.html) no-repeat; left:0; top:-1px; } .i2{ position:absolute; width:28px; height: 29px; background:url(/wbwimg/rr.html) no-repeat; right:0; bottom:-1px; } } } } } } .proup_mask{ position:fixed; left:0; top:0; width:100%; height:100%; background:#000; // @include opacity(0.5); z-index:1000; visibility: hidden; transition:opacity 0.5s; @include opacity(0); &.active{ @include opacity(0.5); visibility: visible; } } .proup{ width:1100px; background: #fff; height:756px; position:absolute; left:50%; margin-left:-550px; top:50%; // margin-top:-378px; z-index:1001; border-radius:5px; visibility: hidden; @include opacity(0); transition:opacity 0.5s; padding-top:20px; box-sizing:border-box; &.active{ @include opacity(1); visibility: visible; } .close{ border: 1px solid #dfdfdf; border-radius: 18px; width:36px; cursor:pointer; height:36px; background:url(/wbwimg/close.html) no-repeat center center #fff; position:absolute; right:-18px; top:-18px; transition:transform 0.5s; &:hover{ transform:rotate(180deg); } } .proup_box{ padding:30px; .proup_top{ padding-bottom:30px; border-bottom:1px solid #dfdfdf; .pic{ float: left; width:44.23%; overflow: hidden; img{ width:100%; height: auto; } } .cont{ padding-top:12px; width:52.88%; float: right; .t{ @include fz(48px,64px); color:#282828; font-weight:bold; } .line{ width:35px; height:3px; background: #dfdfdf; margin-top:12px; } .con{ @include fz(18px,34px); color:#666; margin-top:20px; } } } .flexslider{ width:910px; margin-left:auto; margin-right:auto; margin-top:50px; position:relative; .flex-viewport{ transition:none; } .flex-control-nav{ display: none; } .flex-direction-nav{ .flex-prev{ position:absolute; width:30px; height: 30px; background:url(/wbwimg/prev.html) no-repeat center center; left:-50px; top:50%; margin-top:-15px; overflow: hidden; text-indent:200px; } .flex-next{ position:absolute; width:30px; height: 30px; background:url(/wbwimg/next.html) no-repeat center center; right:-50px; top:50%; margin-top:-15px; overflow: hidden; text-indent:200px; } } .slides{ li{ margin-right:20px; height: 314px; text-align: center; .cont{ width:100%; height:100%; padding-top:45px; border:1px solid #dfdfdf; box-sizing:border-box; } .ico{ width:50px; height: 50px; margin:0 auto; img{ width:100%; } } .t{ padding:0 20px; @include fz(30px,48px); color:#000; margin-top:5px; } .link{ margin-top:15px; padding:0 20px; text-align: left; a{ display: block; @include fz(18px,36px); color:#666; padding-left:15px; transition:color 0.3s; background:url(/wbwimg/rad.html) no-repeat left center; &:hover{ color:#005bac; } } } } } } } } .main{ &.welcome{ .banner{ position:relative; .controls{ position:absolute; width:1200px; left:50%; margin-left:-600px; bottom:48px; z-index:20; ul{ font-size:0; text-align: center; li{ display: inline-block; vertical-align: top; &:last-child{ .line{ display: none; } } &.flex-active{ .ico{ img{ @include opacity(0); &.active{ @include opacity(1); } } } } .ico{ width:23px; height:20px; display: inline-block; vertical-align: middle; position:relative; cursor:pointer; img{ transition:opacity 0.3s; position:absolute; left:0; top:0; &.active{ @include opacity(0); } } } .line{ width:48px; height:3px; background:url(/wbwimg/line.html) no-repeat; display: inline-block; vertical-align: middle; margin:0 6px; } } } } .flexslider{ .slides{ height:100%; li{ width:100%; height:100%; a{ display: block; width:100%; height:100%; } } } } } .index_solution{ .index_solution_cen{ padding:87px 0; .title{ @extend .top; text-align: center; h3{ @include fz(36px,46px); color:#333; } .en{ @include fz(24px,30px); color:#999999; font-family:arial; text-transform:uppercase; } } .list{ margin-top:54px; padding-bottom:13px; ul{ li{ width:25%; float:left; position:relative; left:50px; @include opacity(0); @for $i from 1 through 5{ &.ani#{$i}{ transition:left 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-delay:$i*0.2s; } } &.animate{ @include opacity(1); left:0; } a{ display: block; &:hover{ .icon{ transform:translatey(-10px); } } .icon{ width:180px; height: 180px; margin:0 auto; overflow: hidden; transition:transform 0.5s ease; img{ width:100%; height: auto; } @media(max-width:1300px){ width:150px; height: 150px; } } .cont{ margin-top:20px; text-align: center; .tit{ .t{ @include fz(24px,36px); color:#333333; font-weight:bold; } .en{ @include fz(16px,24px); color:#999; font-family:arial; } } .txt{ @include fz(16px,28px); color:#666; margin-top:15px; padding:0 56px; @media(max-width:1500px){ padding:0 30px; } } } } } } } } } .index_case{ padding:40px 0; .case_cen{ @extend .top; } .title{ padding-top:20px; // @extend .top; text-align: center; h3{ @include fz(36px,46px); color:#fff; } .en{ @include fz(24px,30px); color:#fff; font-family:arial; text-transform:uppercase; } } .pic_box{ width:1200px; margin-left:auto; margin-right:auto; margin-top:120px; height:540px; position:relative; @media(max-width:1400px){ width:1000px; height: 460px; } @media(max-width:1300px){ // height: 480px; margin-top:80px; } .hover_box{ width:340px; height: 400px; position:absolute; left:50%; margin-left:-170px; top:50%; margin-top:-200px; perspective:2000px; transform-style: preserve-3d; visibility: hidden; transform-style:flat\0; &.active{ visibility: visible; } .item{ position:absolute; width:100%; height:100%; background:$color; padding:0 30px; box-sizing:border-box; @include opacity(0); visibility: hidden; transition:0.5s; transform:rotatey(90deg) translatez(100px); transform:rotatey(0deg) translatez(0px)\0; &.active{ visibility: visible; @include opacity(1); transform:rotatey(0deg) translatez(0px)\0; transform:rotatey(0deg) translatez(100px); } .tab{ width:100%; height:100%; display:table; .tab_cell{ display: table-cell; vertical-align: middle; .t{ @include fz(18px,30px); color:#333; font-weight:bold; text-align: center; color:#fff; @extend .ellipsis; } .cont{ @include fz(16px,32px); color:#fff; text-align: center; height: 64px; overflow: hidden; margin-top:20px; } .ico{ width: 32px; height: 10px; background: url(/wbwimg/r.html) no-repeat center center; margin-left: auto; margin-right: auto; margin-top: 60px; } } } } } ul{ li{ position:absolute; // @include opacity(0); // margin-top:30px; // @for $i from 1 through 12{ // &.l#{$i}{ // transition:margin-top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); // transition-delay:$i*0.2s; // } // } // &.animate{ // @include opacity(1); // margin-top:0; // } a{ // position:absolute; // bottom:0; width:100%; // height:100%; display: block; // perspective:2000px; .cont_box{ // position:absolute; // transform-style:preserve-3d; // transition: transform .5s linear; // transform:translatez(-97px); // height: 100%; width:100%; // transform-origin:50%; // transform-style: flat\0; left:0; top:0; } .front{ // position:absolute; width:100%; height:100%; overflow: hidden; left:0; top:0; img{ width:100%; height: auto; } } } &.l1{ // width:200px; width:16.66%; // height:160px; left:0; // top:80px; top:14.8%; width:200px; height:149px; @media(max-width:1400px){ width:166px; height: 124px; } } &.l2{ // width:260px; width:21.66%; // height: 210px; // left:220px; left:18.33%; top:6.2%; width:260px; height: 195px; @media(max-width:1400px){ width:217px; height: 163px; } } &.l3{ // width:141px; width:11.75%; // height: 233px; // left:532px; left:44.33%; top:7.5%; width:141px; height: 188px; @media(max-width:1400px){ width:118px; height: 157px; } } &.l4{ // width:140px; width:11.66%; // height:190px; // left:729px; left:60.75%; // top:52px; top:7.3%; width:140px; height: 186px; @media(max-width:1400px){ width:117px; height: 156px; } } &.l5{ // width:200px; width:16.66%; // height:140px; // left:894px; left:74.5%; // top:90px; top:13.8%; width:200px; height: 150px; @media(max-width:1400px){ width:166px; height: 124px; } } &.l6{ // width:190px; width:15.83%; // height:141px; // left:108px; left:9%; // top:264px; top:48.88%; width:190px; height: 142px; @media(max-width:1400px){ width:159px; height: 119px; } } &.l7{ width:11.66%; // width:140px; // height:190px; // left:325px; left:27.08%; // top:258px; top:48.77%; width:140px; height: 185px; @media(max-width:1400px){ width:117px; height: 155px; } } &.l8{ // width:190px; width:15.83%; // height:275px; // left:507px; left:42.25%; // top:264px; top:48.88%; width:190px; height: 275px; @media(max-width:1400px){ width:159px; height: 230px; } } &.l9{ // width:260px; width:21.66%; // height:210px; // left:729px; left:60.75%; // top:260px; top:49.1%; width:260px; height: 195px; @media(max-width:1400px){ width:216px; height: 162px; } } &.l10{ // width:190px; width:15.83%; // height:140px; // left:1010px; left:84.16%; // top:264px; top:48.88%; width:190px; height:143px; @media(max-width:1400px){ width:159px; height: 119px; } } img{ width:100%; height:auto; display: block; } } } } .more{ width:176px; height:50px; border:1px solid #fff; border-radius:5px; text-align: center; font-size:0; margin-top:50px; display: block; margin-left:auto; margin-right:auto; span{ display: inline-block; vertical-align: middle; @include fz(16px,50px); color:#fff; margin:0 9px; } i{ width:32px; transition:transform 0.5s; height:10px; display: inline-block; vertical-align: middle; background:url(/wbwimg/r.html) no-repeat; margin:0 9px; } &:hover{ i{ transform:translatex(10px); } } } } .news{ padding-top:18px; .title{ @extend .top; text-align: center; h3{ @include fz(36px,46px); color:#333; } .en{ @include fz(24px,30px); color:#999999; font-family:arial; text-transform:uppercase; } } .news_box{ margin-top:52px; padding-bottom:65px; ul{ width:110%; padding-bottom:55px; li{ float:left; width:20.9%; margin-right:2.4%; position:relative; top:50px; @include opacity(0); @for $i from 1 through 5{ &.ani#{$i}{ transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-delay:$i*0.2s; } } &.animate{ top:0px; @include opacity(1); } a{ display: block; position:relative; border-bottom:1px solid #ccc; padding-bottom:22px; &:hover{ .line{ width:100%; } .pic{ img{ transform:scale(1.05); } } } .line{ position:absolute; width:0%; height:3px; background: #f08200; bottom:-1px; left:0; transition:width 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); } .pic{ overflow: hidden; img{ width:100%; height: auto; transition:all 0.5s ease; } } .cont{ padding-top:24px; .t{ @include fz(18px,24px); color:#454545; height: 48px; overflow: hidden; font-weight:bold; } .con{ @include fz(16px,24px); color:#666666; height: 48px; overflow: hidden; margin-top:24px; } .date{ overflow: hidden; margin-top:19px; .time{ float: left; @include fz(16px,24px); color:#666; font-family:arial; } i{ display: block; float: right; width:26px; height:5px; background:url(/wbwimg/i.html) no-repeat; margin-top:2px; } } } } } } .more{ width:176px; height:50px; border:1px solid #bebebe; border-radius:5px; text-align: center; font-size:0; display: block; margin-left:auto; margin-right:auto; span{ display: inline-block; vertical-align: middle; @include fz(16px,50px); color:#454545; margin:0 9px; } i{ width:32px; transition:transform 0.5s; height:10px; display: inline-block; vertical-align: middle; background:url(/wbwimg/r2.html) no-repeat; margin:0 9px; } &:hover{ i{ transform:translatex(10px); } } } } } .about_box{ padding-top:118px; padding-bottom:70px; .about_box_cen{ @extend .top; .pic{ float:left; width:52.8%; overflow: hidden; position:relative; z-index:10; img{ width:100%; transition:transform 0.5s ease; height: auto; } &:hover{ img{ transform:scale(1.05); } } } .cont{ width:40.93%; float: right; .title{ // @extend .top; h3{ @include fz(36px,46px); color:#333; } .en{ @include fz(24px,30px); color:#999999; font-family:arial; text-transform:uppercase; } } .cont_box{ position:relative; .bg{ position:absolute; width:142.8%; height:100%; background: #ebf1f6; top:0; right:0; } .conn{ position:relative; z-index:10; margin-top:34px; padding-right:11.8%; padding-top:48px; padding-bottom:80px; @media(max-width:1400px){ padding-top:30px; padding-bottom:50px; margin-top:25px; } .t{ @include fz(24px,46px); color:#454545; font-weight:bold; } .con{ @include fz(16px,26px); color:#666; height: 104px; overflow: hidden; margin-top:14px; @media(max-width:1400px){ height: 78px; } } .more{ width:176px; height:50px; border:1px solid #b0b8be; border-radius:5px; text-align: center; font-size:0; margin-top:34px; display: block; span{ display: inline-block; vertical-align: middle; @include fz(16px,50px); color:#454545; margin:0 9px; } i{ width:32px; transition:transform 0.5s; height:10px; display: inline-block; vertical-align: middle; background:url(/wbwimg/r2.html) no-repeat; margin:0 9px; } &:hover{ i{ transform:translatex(10px); } } } } } } } } } .fff{ background: #fff !important; } &.important{ .nav_top{ background-color: #fff; box-shadow: 0 0 5px rgba(141,141,141,.2); width:100%; &.fix{ position:fixed; left:0; z-index:1000; top:0; } .nav_top_cen{ ul{ li{ float:left; width:16.66%; height:80px; border-right:1px solid #dfdfdf; box-sizing:border-box; text-align: center; padding:0 5px; box-sizing:border-box; cursor:pointer; position:relative; cursor:pointer; &:hover{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } &.cur{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } .bg{ position:absolute; left:0; // transition:width 0.5s; transform:scalex(0); transform-origin:right center; transition:transform 0.4s ease,width 0.4s ease; top:0; width:100%; height:100%; background: #005bac; transform:scalex(0)\9; width:0\9; } .tab{ width:100%; height:100%; display:table; position:relative; z-index:10; .tab_cell{ transition:color 0.5s; display: table-cell; vertical-align: middle; @include fz(18px,24px); color:#666; @media(max-width:1400px){ font-size:16px; } } } } } } } .content{ .cbox{ padding-top:58px; padding-bottom:30px; .des{ .tit{ @include fz(48px,70px); color:#f08200; font-weight:bold; position:relative; .line{ position:absolute; width:100%; height: 14px; background: #f7f7f7; top:28px; left:0; } .txt{ position:relative; z-index:10; display: inline-block; background: #fff; .icon1{ width:45px; height:45px; display: inline-block; vertical-align: middle; background:url(/wbwimg/i1.html) no-repeat center center; margin-right:18px; } .icon2{ width:31px; height:31px; display: inline-block; vertical-align: middle; background:url(/wbwimg/i2.html) no-repeat center center; margin-left:13px; } span{ @include fz(36px,58px); color:#005bac; font-weight:bold; margin-left:18px; } } } .con{ padding:0 100px; @media(max-width:1400px){ padding:0 35px; } @include fz(18px,34px); color:#666; margin-top:30px; p{ text-indent:2em; } } img{ max-width:100%; margin-top:20px; height: auto !important; } } .container{ margin-top:50px; &.container2{ .list_box{ .tit{ .txt{ span{ color:#0066b8; } } } .application{ .list{ ul{ width:50%; } } } } } .second_tit{ font-size:0; text-align: center; margin-top:20px; position:relative; .line{ position:absolute; width:100%; height: 14px; background: #f7f7f7; left:0; top:25px; } .txt{ display: inline-block; background: #fff; position:relative; z-index:10; @include fz(36px,52px); color:#f08200; font-weight:bold; span{ color:#0066b8; } .icon1{ width:29px; height:31px; background:url(/wbwimg/icon1.html) no-repeat; display: inline-block; vertical-align:0px; margin-right:20px; } .icon2{ margin-left:20px; width:29px; height:31px; background:url(/wbwimg/icon2.html) no-repeat; display: inline-block; vertical-align:0px; } } } .list_box{ @extend .top; padding-bottom:50px; padding-top:28px; .tit{ @include fz(30px,50px); color:#f08200; font-weight:bold; position:relative; .line{ position:absolute; width:100%; height: 14px; background: #f7f7f7; top:21px; left:0; } .txt{ padding-right:15px; position:relative; z-index:10; display: inline-block; background: #fff; .icon1{ width:31px; height:31px; display: inline-block; vertical-align: middle; background:url(/wbwimg/i2.html) no-repeat center center; margin-right:18px; } span{ color:#333; font-weight:normal; } } } .business{ margin-top:12px; padding:0 100px; @media(max-width:1400px){ padding:0 35px; } @include fz(18px,34px); color:#288dae; .txt_box{ margin-top:6px; .txt{ float:left; width:394px; @include fz(18px,34px); color:#666; padding-left:50px; box-sizing:border-box; background:url(/wbwimg/jt.html) no-repeat left center; } } } .cont{ padding:0 100px; @media(max-width:1400px){ padding:0 35px; } @include fz(18px,34px); color:#666; margin-top:30px; p{ text-indent:2em; } } .ds{ border-top:1px solid #666; padding-top:18px; margin-top:20px; ul{ li{ width:33.33%; float: left; background:url(/wbwimg/x.html) no-repeat left center; padding-left:22px; box-sizing:border-box; } } } img{ max-width:100%; margin-top:20px; height: auto !important; } .dt{ @include fz(18px,56px); color:#666; border-bottom:1px solid #dfdfdf; padding-left:40px; background:url(/wbwimg/x.html) no-repeat left center; margin:0 100px; margin-top:15px; @media(max-width:1400px){ margin:0 35px; margin-top:15px; } } .application{ padding:0 100px; @media(max-width:1400px){ padding:0 35px; } margin-top:20px; .t{ @include fz(24px,36px); color:#3f3b3a; font-weight:bold; } .cont_box{ @include fz(18px,34px); color:#666; p{ text-indent:2em; margin-top:6px; } img{ margin-bottom:18px; max-width:100%; height: auto !important; } } .list{ margin-top:12px; ul{ width:40%; float: left; padding-right:10px; box-sizing:border-box; &.last{ width:20%; } &.w100{ width:100%; } li{ display: block; padding-top:0; padding-bottom:0; @include fz(16px,34px); color:#666666; padding-left:15px; box-sizing:border-box; background:url(/wbwimg/rad.html) no-repeat left 13px; } } } } } } } } } &.solution{ .nav_top{ background-color: #fff; box-shadow: 0 0 5px rgba(141,141,141,.2); width:100%; &.fix{ position:fixed; left:0; z-index:1000; top:0; } .nav_top_cen{ ul{ li{ float:left; width:20%; height:80px; border-right:1px solid #dfdfdf; box-sizing:border-box; text-align: center; padding:0 5px; box-sizing:border-box; cursor:pointer; position:relative; cursor:pointer; &:hover{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } &.cur{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } .bg{ position:absolute; left:0; // transition:width 0.5s; transform:scalex(0); transform-origin:right center; transition:transform 0.4s ease,width 0.4s ease; top:0; width:100%; height:100%; background: #005bac; transform:scalex(0)\9; width:0\9; } a{ display: block; width:100%; height:100%; position:absolute; left:0; top:0; } .tab{ width:100%; height:100%; display:table; position:relative; z-index:10; .tab_cell{ transition:color 0.5s; display: table-cell; vertical-align: middle; @include fz(18px,24px); color:#666; @media(max-width:1400px){ font-size:16px; } } } } } } } .solution_top{ padding-bottom:64px; .solution_cen{ padding-top:89px; .sl{ float: left; width:50.334%; position:relative; top:50px; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); } img{ width:100%; display: block; } } .sr{ width:46.66%; float: right; padding-top:48px; position:relative; top:50px; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-delay:0.2s; } @media(max-width:1500px){ padding-top:25px; } .sr_t{ .t{ @include fz(48px,70px); color:#333; font-weight:bold; @media(max-width:1500px){ @include fz(40px,60px); } } } .bot{ margin-top:38px; .t{ @include fz(30px,50px); color:#333; font-weight:bold; @media(max-width:1500px){ @include fz(24px,40px); } } } .text{ margin-top:28px; @include fz(18px,34px); color:#666666; @media(max-width:1500px){ @include fz(16px,28px); } } } } } .tit{ position:relative; text-align: center; top:50px; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); } .txt{ position:relative; z-index:10; @include fz(48px,68px); color:#333; font-weight:bold; display: inline-block; padding:0 40px; background: #f5f5f5; @media(max-width:1500px){ @include fz(40px,60px); } .line1{ width:30px; height:3px; background: #005bac; position:absolute; top:50%; margin-top:-1.5px; &.line-1{ left:-30px; } &.line-2{ right:-30px; } } } .line{ position:absolute; width:100%; height:1px; background: #dfdfdf; top:50%; left:0; } } .cloud{ padding-bottom:68px; background: #f5f5f5; .cloud_cen{ padding-top:80px; .ds{ @include fz(18px,36px); color:#666; margin-top:11px; text-align: center; top:50px; position:relative; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-delay:0.2s; } } .list{ margin-top:38px; padding-bottom:45px; border-bottom:1px solid #dfdfdf; ul{ width:110%; .li{ float:left; width:12.12%; margin-right:3.6%; position:relative; left:50px; @include opacity(0); @for $i from 1 through 7{ &:nth-child(#{$i}){ &.animate{ left:0; @include opacity(1); transition:left 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-delay:$i*0.2s; } } } @media(max-width:1450px){ width:14.2%; margin-right:1%; } .ico{ width:54px; height: 54px; margin:0 auto; position:relative; img{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; max-width:100%; max-height:100%; } } .txt{ @include fz(24px,42px); color:#333; font-weight:bold; margin-top:8px; text-align: center; } ul{ width:100%; margin-top:20px; li{ margin-top:20px; width:100%; height:50px; background: #fff; border-radius:25px; @include fz(18px,50px); color:#666; text-align: center; @media(max-width:1450px){ font-size:16px; } } } } } } .case{ @extend .top; .case_text{ padding-top:44px; .t{ @include fz(30px,42px); color:#333; font-weight:bold; text-align: center; } .text{ margin-top:12px; @include fz(18px,36px); color:#666; text-align: center; } } .img{ margin-top:45px; img{ max-width:100%; height: auto !important; } } } } } .internet{ padding-bottom:90px; padding-top:75px; .pic_box{ position:relative; margin-top:56px; .pic{ width:50%; overflow: hidden; @extend .right; img{ width:100%; height: auto; } } .text_box{ position:absolute; width:61.97%; height:100%; right:0; // top:0; top:50px; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); } .tab{ width:100%; height:100%; display:table; .tab_cell{ display: table-cell; vertical-align: middle; .box{ position:relative; .bg{ position:absolute; width:100%; height:100%; @include opacity(0.8); background-color: #005bab; } .con{ position:relative; color:#fff; padding-top:7px; padding-bottom:45px; padding-left:8.73%; padding-right:17.64%; @include fz(18px,32px); p{ padding-top:35px; } @media(max-width:1500px){ @include fz(16px,28px); p{ padding-top:20px; } } @media(max-width:1300px){ padding-left:5%; @include fz(15px,26px); } } } } } } } .tbox{ ul{ li{ @extend .top; padding-top:62px; padding-bottom:67px; border-bottom:1px solid #dfdfdf; &.even{ .img{ float: left; } .text_box{ float: right; padding-top:35px; } } .img{ float: right; width:49.87%; img{ width:100%; height: auto; } } .text_box{ float: left; width:45.66%; padding-top:150px; @media(max-width:1400px){ padding-top:90px; } .t{ @include fz(30px,64px); color:#333; font-weight:bold; } .con{ @include fz(18px,34px); color:#666; margin-top:22px; } } } } } .private{ margin-top:78px; .ds{ @include fz(18px,36px); color:#666; margin-top:11px; text-align: center; top:50px; position:relative; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-delay:0.2s; } } .img{ @extend .top; text-align: center; margin-top:43px; img{ max-width:100%; height: auto !important; } } .cop{ margin-top:68px; padding-top:60px; @extend .top; border-top:1px solid #dfdfdf; .t{ @include fz(30px,36px); color:#333; text-align: center; } .img{ margin-top:30px; } } } } .contact{ padding-top:75px; background: #f5f5f5; padding-bottom:80px; .contact_cen{ @extend .top; } .tit{ @include opacity(1); position:relative; top:0; } .message{ margin-top:70px; position:relative; .line{ width:1px; height: 178px; background: #dfdfdf; position:absolute; left:40.83%; top:50%; margin-top:-89px; } .msg{ width:40.83%; float:left; @include fz(18px,40px); color:#666; padding-right:20px; box-sizing:border-box; div{ margin-bottom:17px; transition:color 0.5s,background 0.5s; padding-left:55px; &:hover{ color:#333; &.address{ background:url(/wbwimg/add2.html) no-repeat left center; } &.tel{ background:url(/wbwimg/tl2.html) no-repeat left center; } &.fax{ background:url(/wbwimg/fax2.html) no-repeat left center; } &.email{ background:url(/wbwimg/email2.html) no-repeat left center; } } &.address{ background:url(/wbwimg/add1.html) no-repeat left center; } &.tel{ background:url(/wbwimg/tl.html) no-repeat left center; } &.fax{ background:url(/wbwimg/fax.html) no-repeat left center; } &.email{ background:url(/wbwimg/email.html) no-repeat left center; } } } .code_box{ float: right; .code{ width:150px; float: left; margin-left:54px; &.none{ margin-left: 0; } .pic{ width:150px; height: 150px; background: #fff; border-radius:6px; img{ border-radius:6px; width:100%; height: auto; } } .txt{ @include fz(18px,36px); color:#333; font-weight:bold; margin-top:11px; text-align: center; } } } } } .city_box{ background: #f7f7f7; padding-top:198px; padding-bottom:90px; @media(max-width:1400px){ padding-top:120px; } .city_cen{ ul{ width:110%; li{ width:27.87%; float:left; background: #fff; border-radius:5px; cursor:pointer; margin-right:3.63%; margin-top:3.63%; @extend .top; transition:background 0.5s; &:hover{ background: #005bac; .pic{ img{ transform:scale(1.05); } } .cont{ .t{ color:#fff; } .line{ background: #fff; } .con{ color:#fff; } .more{ background: #fff; border-color:#fff; color:#005bac; } } } &.even{ .tbox{ margin-top:-23.3%; } } .pic{ border-radius:5px 5px 0 0; overflow: hidden; img{ border-radius:5px 5px 0 0; width:100%; height: auto; transition:all 0.5s ease; } } .cont{ text-align: center; padding:42px 62px 72px 62px; @media(max-width:1540px){ padding:42px 45px 72px 45px; } @media(max-width:1280px){ padding:32px 30px 45px 30px; } .t{ @include fz(48px,64px); color:#333; font-weight:bold; transition:color 0.5s; @media(max-width:1450px){ @include fz(40px,60px); } } .line{ width:35px; height:3px; background: #dfdfdf; margin-top:11px; margin-left:auto; transition:background 0.5s; margin-right:auto; } .con{ @include fz(18px,36px); color:#666; height: 72px; overflow: hidden; margin-top:20px; transition:color 0.5s; } .more{ width:120px; height:40px; @include fz(18px,40px); color:#333; text-align: center; border:1px solid #333; border-radius:4px; text-align: center; margin-left:auto; margin-right:auto; margin-top:42px; transition:color 0.5s,background 0.5s,border-color 0.5s; } } } } } } .detail{ padding-top:65px; padding-bottom:80px; background: #f7f7f8; .detail_box{ background: #fff; padding-bottom:60px; @extend .top; box-sizing:border-box; @media(max-width:1500px){ padding-left:100px; padding-right:100px; } .page_box{ width:1200px; position:relative; margin:0 auto; margin-top:40px; padding-right:75px; box-sizing:border-box; @media(max-width:1500px){ width:auto; } .page_l{ @include fz(14px,32px); color:#666; p{ @extend .ellipsis; } a{ color:#666; transition:color 0.3s; &:hover{ color:#005bac; } } } .return{ position:absolute; right:20px; top:0; @include fz(14px,32px); color:#333; padding-left:27px; transition:color 0.3s; display: inline-block; background:url(/wbwimg/return.html) no-repeat left center; &:hover{ color:#005bac; } } } .content{ width:1200px; margin:0 auto; @media(max-width:1500px){ width:auto; } img{ max-width:100%; height: auto !important; } .detail_tit{ padding-top:54px; @include fz(36px,54px); color:#333; font-weight:bold; padding-bottom:34px; text-align: center; border-bottom:1px solid #dfdfdf; } .ds{ padding-top:23px; @include fz(16px,28px); color:#666; } .programme{ .item{ padding-top:30px; padding-bottom:42px; border-bottom:1px solid #dfdfdf; .t{ @include fz(24px,24px); color:#333; font-weight:bold; padding-left:15px; margin-bottom:9px; margin-top:20px; border-left:5px solid #005bac; } .con{ @include fz(16px,28px); color:#666; p{ padding-top:15px; } span,strong{ color:#333; } } } } } } } .business_b{ background: #f7f7f7; .business_cen{ .box{ padding-bottom:158px; padding-top:1px; ul{ li{ position:relative; margin-top:9.8%; @extend .top; .box_l{ width:53.33%; background: #fff; border-radius:5px; transition:background 0.5s; &:hover{ background: #005bac; a{ .pic{ img{ transform:scale(1.05); } } .cont{ .t,.con{ color:#fff; } .btn{ background: #fff; border-color:#fff; color:#005bac; } .line{ background: #fff; } } } } &.box_r{ position:absolute; right:0; top:9.5%; a{ .pic{ border-radius:0 0 5px 5px; img{ border-radius:0 0 5px 5px; } } .cont{ padding:35px 18.75% 48px 18.75%; } } } a{ display: block; .pic{ border-radius:5px 5px 0 0; overflow: hidden; img{ width:100%; border-radius:5px 5px 0 0; height: auto; transition:0.5s ease; } } .cont{ padding:42px 18.75% 52px 18.75%; .t{ @include fz(48px,66px); color:#333; font-weight:bold; transition:color 0.5s; @media(max-width:1500px){ @include fz(40px,60px); } } .line{ width:35px; height:3px; transition:background 0.5s; margin-top:11px; background: #dfdfdf; } .con{ transition:color 0.5s; @include fz(18px,36px); color:#666; height: 72px; overflow: hidden; margin-top:20px; @media(max-width:1500px){ @include fz(16px,32px); height: 64px; } } .btn{ width:120px; height:40px; border:1px solid #333; border-radius:6px; @include fz(18px,40px); color:#333; text-align: center; margin-top:32px; transition:color 0.5s,background 0.5s border-color 0.5s; } } } } } } } } .list{ padding-bottom:85px; padding-top: 1px; ul{ li{ @extend .top; margin-top:70px; &.even{ a{ .pic{ float: right; } .cont{ right:auto; left:0; } } } &:hover{ a{ .pic{ img{ transform:scale(1.05); } } .cont{ background: #005bac; .t,.con{ color:#fff; } .btn{ background: #fff; border-color:#fff; color:#005bac; } .line{ background: #fff; } } } } a{ display: block; overflow: hidden; position:relative; .pic{ width:50%; border-radius:5px; overflow: hidden; img{ width:100%; height: auto; border-radius:5px; transition:all 0.5s ease; } } .cont{ width:56%; background: #fff; border-radius:5px; position:absolute; right:0; bottom:14px; padding:4% 4.66% 4.66% 4.66%; box-sizing:border-box; transition:background 0.5s; @media(max-width:1400px){ padding:2.5% 4.66% 3.16% 4.66%; } .t{ @include fz(48px,66px); color:#333; font-weight:bold; transition:color 0.5s; @media(max-width:1500px){ @include fz(40px,60px); } } .line{ width:35px; height:3px; transition:background 0.5s; margin-top:11px; background: #dfdfdf; } .con{ transition:color 0.5s; @include fz(18px,36px); color:#666; height: 72px; overflow: hidden; margin-top:20px; @media(max-width:1500px){ @include fz(16px,32px); height: 64px; } } .btn{ width:120px; height:40px; border:1px solid #333; border-radius:6px; @include fz(18px,40px); color:#333; text-align: center; margin-top:32px; transition:color 0.5s,background 0.5s border-color 0.5s; } } } } } } } } &.service{ .nav_top{ background-color: #fff; box-shadow: 0 0 5px rgba(141,141,141,.2); width:100%; &.fix{ position:fixed; left:0; z-index:1000; top:0; } .nav_top_cen{ ul{ li{ float:left; width:20%; height:80px; border-right:1px solid #dfdfdf; box-sizing:border-box; text-align: center; padding:0 5px; box-sizing:border-box; cursor:pointer; position:relative; cursor:pointer; &:hover{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } &.cur{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } .bg{ position:absolute; left:0; // transition:width 0.5s; transform:scalex(0); transform-origin:right center; transition:transform 0.4s ease,width 0.4s ease; top:0; width:100%; height:100%; background: #005bac; transform:scalex(0)\9; width:0\9; } a{ display: block; width:100%; height:100%; position:absolute; left:0; top:0; } .tab{ width:100%; height:100%; display:table; position:relative; z-index:10; .tab_cell{ transition:color 0.5s; display: table-cell; vertical-align: middle; @include fz(18px,24px); color:#666; @media(max-width:1400px){ font-size:16px; } } } } } } } .service_box{ margin-top:68px; .service_top{ @extend .top; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1), inset 0 3px 0 #005bab; position:relative; .line{ position:absolute; width:100%; height: 3px; background: #005bac; left:0; top:0; } .text_box{ @include fz(18px,36px); color:#666; padding:17px 0; } } .tit{ position:relative; text-align: center; .txt{ position:relative; z-index:10; @include fz(48px,68px); color:#333; font-weight:bold; display: inline-block; padding:0 40px; background: #fff; @media(max-width:1500px){ @include fz(40px,60px); } .line1{ width:30px; height:3px; background: #005bac; position:absolute; top:50%; margin-top:-1.5px; &.line-1{ left:-30px; } &.line-2{ right:-30px; } } } .line{ position:absolute; width:100%; height:1px; background: #dfdfdf; top:50%; left:0; } } .analysis{ padding-top:65px; @extend .top; .content{ margin-top:5px; .pic{ float:left; width:43.6%; overflow: hidden; img{ width:100%; height: auto; } } .text{ float: right; padding-top:30px; width:50%; @include fz(18px,36px); color:#666; @media(max-width:1400px){ @include fz(16px,28px); } p{ padding-top:20px; } } } } .visualization{ @extend .top; padding-bottom:110px; margin-top:45px; .con{ margin-top:30px; @include fz(18px,36px); color:#666; @media(max-width:1400px){ @include fz(16px,28px); } } } .migrate{ @extend .top; margin-top:65px; .content{ margin-top:12px; .pic{ float:right; width:43.6%; overflow: hidden; img{ width:100%; height: auto; } } .text{ float: left; padding-top:80px; width:50%; @include fz(18px,36px); color:#666; @media(max-width:1400px){ padding-top:50px; @include fz(16px,28px); } p{ padding-top:20px; } } } } .development{ @extend .top; margin-top:58px; .dbox{ padding-bottom:82px; margin-top:45px; .pic{ width:50%; float:left; overflow: hidden; img{ width:100%; height: auto; } } .cont{ width:46.13%; float: right; .t{ @include fz(30px,52px); color:#333; font-weight:bold; } .con{ @include fz(18px,34px); color:#666; margin-top:15px; @media(max-width:1400px){ @include fz(16px,28px); } p{ padding-top:18px; @media(max-width:1400px){ padding-top:10px; } } } } } } .total_box{ @extend .top; margin-top:74px; .list{ ul{ li{ margin-bottom:30px; margin-top:60px; &.even{ .pic{ float: right; } .cont{ float: left; } } .pic{ float:left; width:50.2%; @media(max-width:1400px){ margin-top:60px; } img{ width: 100%; height: auto; } } .cont{ width:46%; float: right; padding-top: 38px; @media(max-width:1400px){ padding-top:0; } .con{ @include fz(18px,34px); color:#666; margin-top:30px; @media(max-width:1400px){ @include fz(16px,28px); } } .con_t{ .t{ @include fz(30px,52px); color:#333; font-weight:bold; } } .con_b{ margin-top:28px; .t{ @include fz(18px,30px); color:#333; font-weight:bold; } .con{ margin-top:15px; } } } } } } } } .item_box{ padding-bottom:90px; .img{ text-align: center; margin-top:10px; img{ max-width:100%; height: auto; } } .item{ margin-top:50px; @extend .top; .intro{ overflow: hidden; position:relative; margin-top:37px; padding-bottom:20px; .ds{ @include fz(18px,36px); color:#666; } &.intro2{ .il{ position:absolute; width:46%; height:100%; img{ position:absolute; left:0; bottom:0; top:0; margin:auto; right:0; max-width:100%; max-height:100%; } } .text{ position:static; float: right; width:50%; @include fz(18px,36px); color:#666; &.w100{ width:100%; } } } &.even{ .il{ float: right; } .text{ right:auto; left:0; } } .il{ width:46%; img{ max-width:100%; } } .text{ position:absolute; width:50%; height:100%; right:0; top:0; .tab{ width:100%; height:100%; display:table; .tab_cell{ display: table-cell; vertical-align: middle; @include fz(18px,36px); color:#666; } } } } } } .box{ padding-bottom:125px; @extend .top; .box1{ margin-top:70px; position:relative; .box_l{ width:50.2%; overflow: hidden; img{ width:100%; height: auto; } } .cont{ position:absolute; width:49.8%; top:32px; bottom:32px; background: #f7f7f7; right:0; padding:0 4.8%; box-sizing:border-box; @media(max-width:1300px){ top:20px; bottom:20px; } .tab{ width:100%; height:100%; display:table; .tab_cell{ display: table-cell; vertical-align: middle; .t{ @include fz(48px,66px); color:#333; font-weight:bold; @media(max-width:1450px){ @include fz(40px,56px); } } .con{ margin-top:28px; @include fz(18px,36px); color:#666; @media(max-width:1450px){ margin-top:20px; @include fz(16px,28px); } } } } } } .box3{ margin-top:90px; position:relative; .box_l{ float:left; width:50%; position:relative; z-index:10; overflow: hidden; img{ width:100%; height: auto; } } .bg{ position:absolute; width:70.8%; height:100%; background: #f7f7f7; right:0; top:32px; } .box_r{ position:relative; z-index:10; float: right; padding:0 4.8%; box-sizing:border-box; width:50%; padding-top:90px; padding-bottom:62px; @media(max-width:1300px){ padding-bottom:0; } // margin-top:32px; .t{ @include fz(48px,66px); color:#333; font-weight:bold; @media(max-width:1450px){ @include fz(40px,56px); } } .con{ margin-top:8px; @include fz(18px,36px); color:#666; @media(max-width:1450px){ margin-top:0px; @include fz(16px,28px); } p{ padding-top:18px; } } } } .box2{ position:relative; margin-top:90px; .img{ overflow: hidden; position:absolute; width:50%; height:100%; right:0; top:0; img{ position:absolute; max-width:100%; left:0; top:0; bottom:0; right:0; margin:auto; } } .box_l{ width:71%; background: #f7f7f7; padding:60px 24% 60px 4.8%; box-sizing:border-box; .t{ @include fz(48px,66px); color:#333; font-weight:bold; @media(max-width:1450px){ @include fz(40px,56px); } } .con{ margin-top:28px; @include fz(18px,36px); color:#666; @media(max-width:1450px){ margin-top:20px; @include fz(16px,28px); } } .ds{ margin-top:50px; .tit{ @include fz(30px,44px); color:#005bac; font-weight:bold; } .co{ margin-top:14px; @include fz(18px,36px); color:#005bac; @media(max-width:1450px){ margin-top:20px; @include fz(16px,28px); } } } } } } } &.case{ .case_box{ background: #f7f7f7; .case_cen{ padding-bottom:88px; padding-top:10px; ul{ width:110%; li{ width:27.87%; float:left; margin-right: 3.63%; margin-top:3.63%; @extend .top; a{ border-radius:5px; display: block; transition:background 0.5s; background: #fff; &:hover{ background: #005bac; .pic{ img{ transform:scale(1.05); } } .cont{ color:#fff; } } .pic{ border-radius:5px 5px 0 0 ; overflow: hidden; img{ transition:transform 0.5s ease; width:100%; border-radius:5px 5px 0 0 ; height: auto; } } .cont{ height: 80px; @include fz(18px,80px); color:#333; font-weight:bold; text-align: center; padding:0 15px; box-sizing:border-box; transition:color 0.5s; @extend .ellipsis; } } } } } } } &.news{ .news_detail{ padding-bottom:100px; @extend .top; .detail_tit{ padding-bottom:25px; text-align: center; border-bottom:1px dashed #cdcdcd; .t{ @include fz(30px,48px); color:#454545; } .msg{ @include fz(18px,28px); color:#999; margin-top:12px; span{ color:#666; } } } .detail_con{ @include fz(18px,32px); color:#666; border-bottom:1px dashed #cdcdcd; padding-bottom:50px; padding-top:34px; img{ max-width:100%; height:auto !important; } } .detail_bot{ margin-top:38px; position:relative; padding-right:190px; .detail_l{ @include fz(18px,36px); color:#454545; p{ @extend .ellipsis; } a{ color:#454545; transition:color 0.3s,text-decoration 0.3s; &:hover{ color:$color; text-decoration:underline; } } } .return{ width:180px; height:56px; display: block; border-radius:28px; background: $color; text-align: center; font-size:0; position:absolute; right:0; top:50%; margin-top:-28px; .ico{ display: inline-block; vertical-align: middle; margin:0 8px; @media(max-width:768px){ margin:0 3px; img{ height: 16px; } } } .txt{ @include fz(16px,56px); color:#fff; display: inline-block; vertical-align: middle; margin:0 8px; @media(max-width:1200px){ @include fz(14px,48px); } @media(max-width:768px){ margin:0 3px; @include fz(14px,36px); } } } } } .nav_top{ background-color: #fff; box-shadow: 0 0 5px rgba(141,141,141,.2); width:100%; &.fix{ position:fixed; left:0; z-index:1000; top:0; } .nav_top_cen{ ul{ font-size:0; text-align: center; li{ // float:left; display: inline-block; vertical-align: top; // width:20%; width:19.73%; height:80px; border-right:1px solid #dfdfdf; box-sizing:border-box; text-align: center; padding:0 5px; box-sizing:border-box; cursor:pointer; position:relative; cursor:pointer; &:hover{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } &.cur{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } .bg{ position:absolute; left:0; // transition:width 0.5s; transform:scalex(0); transform-origin:right center; transition:transform 0.4s ease,width 0.4s ease; top:0; width:100%; height:100%; background: #005bac; transform:scalex(0)\9; width:0\9; } a{ display: block; width:100%; height:100%; position:absolute; left:0; top:0; } .tab{ width:100%; height:100%; display:table; position:relative; z-index:10; .tab_cell{ transition:color 0.5s; display: table-cell; vertical-align: middle; @include fz(18px,24px); color:#666; @media(max-width:1400px){ font-size:16px; } } } } } } } .container{ background: #f7f7f7; .news_box{ padding-top:70px; .news_top{ .flexslider{ @extend .top; .flex-control-nav{ bottom:16.66%; text-align:right; padding-right:70px; box-sizing:border-box; li{ margin:0 6px; a{ overflow: hidden; text-indent:200px; background: #999; &.flex-active{ background: #005bac; } } } } .slides{ li{ a{ display: block; position:relative; .cont{ position:absolute; right:0; // top:0; padding:44px 0; width:61.33%; top:16.66%; .bg{ position:absolute; width:100%; ;eft:0; top:0; height:100%; @include opacity(0.8); background: #005bab; } .cont_box{ position:relative; z-index:10; padding:0 7.59%; box-sizing:border-box; .t{ @include fz(18px,30px); color:#fff; font-weight:bold; @extend .ellipsis; } .con{ @include fz(16px,30px); color:#fff; overflow: hidden; height: 60px; margin-top:15px; } .date{ @include fz(14px,20px); color:#fff; margin-top:12px; } } } .pic{ width:50%; overflow: hidden; img{ width:100%; height: auto; } } } } } } } .news_list{ margin-top:52px; padding-bottom:85px; .paging{ margin-top:48px; } ul{ width:110%; // padding-bottom:55px; li{ float:left; width:20.9%; margin-right:2.4%; position:relative; top:50px; margin-top:2.4%; @include opacity(0); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); @extend .top; &.animate{ top:0px; @include opacity(1); } a{ display: block; position:relative; border-bottom:1px solid #ccc; padding-bottom:22px; &:hover{ .line{ width:100%; } .pic{ img{ transform:scale(1.05); } } } .line{ position:absolute; width:0%; height:3px; background: #f08200; bottom:-1px; left:0; transition:width 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); } .pic{ overflow: hidden; img{ width:100%; height: auto; transition:all 0.5s ease; } } .cont{ padding-top:24px; padding-left:20px; padding-right:20px; @media(max-width:1400px){ padding-left:0; padding-right:0; } .t{ @include fz(18px,24px); color:#454545; @extend .ellipsis; font-weight:bold; } .con{ @include fz(16px,24px); color:#999; height: 48px; overflow: hidden; margin-top:24px; } .date{ overflow: hidden; margin-top:39px; @media(max-width:1400px){ margin-top:15px; } .time{ float: left; @include fz(16px,24px); color:#999; font-family:arial; } i{ display: block; float: right; width:26px; height:5px; background:url(/wbwimg/i.html) no-repeat; margin-top:2px; } } } } } } } .list_box{ padding-top:32px; padding-bottom:90px; ul{ li{ width:48.66%; display: block; background: #fff; margin-top:2.68%; @extend .top; a{ position:relative; display: block; &:hover{ .day{ background: #005bac; .date{ color:#fff; } } } .day{ transition:background 0.3s; width:80px; height:100%; position:absolute; left:0; top:0; background: #999; padding-top:26px; box-sizing:border-box; text-align: center; .date{ @include fz(36px,40px); color:#fff; font-family:arial; transition:color 0.3s; } .time{ @include fz(14px,16px); color:#fff; @include opacity(0.5); margin-top:10px; font-family:arial; } .ico{ width:24px; height: 24px; background:url(/wbwimg/time.html) no-repeat; margin-left:auto; margin-right:auto; margin-top:7px; } } .cont{ padding:20px 30px; margin-left:80px; .t{ @include fz(18px,36px); color:#333; font-weight:bold; @extend .ellipsis; } .con{ @include fz(16px,28px); color:#666; margin-top:15px; } } } } } } .year_list{ padding:20px 50px; background: #fff; box-sizing:border-box; font-size:0; a{ @include fz(18px,40px); color:#666; transition:color 0.3s,background 0.3s; padding:0 20px; display: inline-block; height: 40px; margin-right:24px; &.active{ background: #005bac; color:#fff; } &:hover{ background: #005bac; color:#fff; } } } .journal_list{ padding-bottom:90px; margin-top:30px; ul{ width:110%; li{ float:left; width:20.9%; margin-right:2.42%; background: #fff; margin-top:2.42%; a{ display: block; &:hover{ .pic{ img{ transform:scale(1.05); } } .cont{ background: #005bac; .t{ color:#fff; background:url(/wbwimg/fd2.html) no-repeat right center; } .periodical{ color:#fff; } } } .pic{ overflow: hidden; img{ width:100%; transition:all 0.5s ease; height: auto; } } .cont{ padding:9px 22px 12px 22px; transition:background 0.5s; .t{ @extend .ellipsis; @include fz(18px,40px); color:#333; padding-right:30px; transition:color 0.5s,background 0.5s; background:url(/wbwimg/fd.html) no-repeat right center; } .periodical{ @include fz(14px,30px); transition:color 0.5s; color:#999; } } } } } } } } } &.about{ .nav_top{ background-color: #fff; box-shadow: 0 0 5px rgba(141,141,141,.2); width:100%; &.fix{ position:fixed; left:0; z-index:1000; top:0; } .nav_top_cen{ ul{ font-size:0; text-align: center; li{ // float:left; display: inline-block; vertical-align: top; width:20%; height:80px; border-right:1px solid #dfdfdf; box-sizing:border-box; text-align: center; padding:0 5px; box-sizing:border-box; cursor:pointer; position:relative; cursor:pointer; &:hover{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } &.cur{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } .bg{ position:absolute; left:0; // transition:width 0.5s; transform:scalex(0); transform-origin:right center; transition:transform 0.4s ease,width 0.4s ease; top:0; width:100%; height:100%; background: #005bac; transform:scalex(0)\9; width:0\9; } a{ display: block; width:100%; height:100%; position:absolute; left:0; top:0; } .tab{ width:100%; height:100%; display:table; position:relative; z-index:10; .tab_cell{ transition:color 0.5s; display: table-cell; vertical-align: middle; @include fz(18px,24px); color:#666; @media(max-width:1400px){ font-size:16px; } } } } } } } .about_box{ .about_top{ padding-top:70px; padding-bottom:110px; background: #f7f7f7; .about_top_cen{ @extend .top; .pic{ width:53.266%; float:left; position:relative; z-index:10; overflow: hidden; img{ width:100%; height: auto; } } .cont{ float: right; width:43.2%; .title{ padding-bottom:8px; @include fz(30px,70px); color:#333; font-weight:bold; } .con_box{ position:relative; .bg{ width:142%; position:absolute; top:0; right:0; height:100%; background: #fff; } .conn{ box-sizing:border-box; position:relative; z-index:10; padding-right:6.8%; padding-top:24px; padding-bottom:30px; .btn_box{ overflow: hidden; margin-top:24px; div{ width:40px; height: 40px; float: left; cursor:pointer; transition:background 0.3s; &.up{ background:url(/wbwimg/s2.html) no-repeat center center #ccc; &:hover{ background:url(/wbwimg/s2.html) no-repeat center center $color; } } &.down{ background:url(/wbwimg/x2.html) no-repeat center center #ccc; &:hover{ background:url(/wbwimg/x2.html) no-repeat center center $color; } } } } .text{ height:28*11px; overflow: hidden; @media(max-width:1400px){ height:28*8px; } .text_box{ @include fz(16px,28px); color:#666; p{ text-indent:2em; } } } } } } } } .video_box{ position:relative; .tit{ width:1200px; position:absolute; @include fz(30px,60px); color:#fff; font-weight:bold; background:url(/wbwimg/play.html) no-repeat left center; height:60px; margin-top:-30px; // top:50%; left:0; cursor:pointer; padding-left:85px; box-sizing:border-box; left:50%; margin-left:-600px; top:55%; @include opacity(0); &.animate{ top:50%; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1),background 0.5s; } @media(max-width:1400px){ width:1000px; margin-left:-500px; } } img{ width:100%; display: block; } } } .about-history{ width:100%; height: 2287px; background: #f7f7f7; position:relative; overflow: hidden; // margin-bottom:-168px; .line{ position:absolute; width:100%; height:100%; left:0; top:0; background:url(/wbwimg/line3.html) no-repeat center top; } .line-color{ position:absolute; width:100%; height:175px; background:url(/wbwimg/line4.html) no-repeat center top; left:0; top:0; } .container{ position:relative; height:100%; width:1200px; margin:0 auto; position:relative; .desc{ position:absolute; top:70px; left:495px; &.fixed{ position: fixed; top:312px; left:50%; // @media(max-width:1500px){ // left:300px; // } } @media(max-width:1500px){ left:300px; } .btn-switch{ position:absolute; width:40px; right:-40px; top:58px; a{ display: block; width:40px; height: 40px; cursor:pointer; transition:background 0.3s; &.prev{ background:url(/wbwimg/s2.html) no-repeat center center #ccc; &:hover{ background:url(/wbwimg/s2.html) no-repeat center center $color; } } &.next{ background:url(/wbwimg/x2.html) no-repeat center center #ccc; &:hover{ background:url(/wbwimg/x2.html) no-repeat center center $color; } } } } ul{ li{ width:768px; height: 140px; display: none; &.current{ display: block; } &.expand{ .text{ .ico2{ display: block; } } } .year{ position: relative; float: left; width: 196px; height: 138px; background: #f08200; font: 60px/138px "impact"; color: #fff; text-align: center; .bg{ position: absolute; bottom: -30px; left: 0; content: ""; border-width: 15px 18px; border-style: solid; border-color: #d17100 #d17100 transparent transparent; } } .text{ width:560px; height:138px; background: #fff; float:left; margin-left:10px; padding:4px 40px; box-sizing:border-box; overflow:hidden; position:relative; .ico2{ width:32px; height: 32px; background:url(/wbwimg/xia.html) no-repeat; position:absolute; bottom:5px; right:10px; display: none; } .ico{ width:30px; height: 36px; background:url(/wbwimg/y.html) no-repeat; position:absolute; top:0; right:0px; } .tab{ width:100%; height:100%; display:table; .tab_cell{ display: table-cell; vertical-align: middle; @include fz(16px,26px); color:#666; } } } } } } .dots{ ul{ li{ position:absolute; .rad{ width:32px; height:32px; display: inline-block; vertical-align: middle; background:url(/wbwimg/rbg.html) no-repeat center center; background-position:0 0; } .txt{ display: inline-block; vertical-align: middle; @include fz(24px,32px); margin-left:20px; } &.item1{ left:314px; top:155px; } &.item2{ left:415px; top:391px; } &.item3{ left:688px; top:545px; } &.item4{ left:990px; top:713px; } &.item5{ left:637px; top:909px; } &.item6{ left:897px; top:1114px; } &.item7{ left:455px; top:1255px; } &.item8{ left:562px; top:1495px; } &.item9{ left:140px; top:1666px; } &.item10{ left:455px; top:1925px; } &.active{ .rad{ background-position:-37px 0; } } } } } } } .system_box{ background: #f7f7f7; .system_box_cen{ padding-top:80px; .cont_top{ @extend .top; text-align: center; .t{ @include fz(48px,68px); color:#333; font-weight:bold; @media(max-width:1400px){ @include fz(40px,60px); } } .con{ margin-top:30px; @include fz(18px,36px); color:#666; @media(max-width:1400px){ @include fz(16px,32px); } } } .system{ @extend .top; margin-top:48px; position:relative; .ico{ width:41.93%; position:absolute; left:50%; height:100%; margin-left: -20.965%; margin-top:-2%; img{ position:absolute; left:0; top:0; right:0; bottom:0; max-width:100%; max-height:100%; margin:auto; height: auto; } } ul{ font-size:0; li{ float:none; display: inline-block; vertical-align: top; width:40%; font-size:24px; margin-bottom:80px; &.item2,&.item4{ margin-left:20%; } &.item3,&.item4{ margin-top:220px; @media(max-width:1400px){ margin-top:150px; } } .tit{ padding-left:78px; position:relative; min-height:56px; .num{ width:56px; height: 56px; background: #005bac; border-radius:50%; @include fz(30px,56px); color:#f7f7f7; text-align: center; position:absolute; left:0; top:50%; margin-top:-28px; } .text{ @include fz(24px,38px); color:#333; font-weight: bold; min-height:56px; @media(max-width:1400px){ @include fz(20px,30px); } .tab{ width:100%; height: 100%; min-height:56px; display:table; .tab_cell{ display: table-cell; vertical-align: middle; } } } } .con{ @include fz(16px,30px); color:#666; margin-top:16px; @media(max-width:1400px){ @include fz(14px,24px); } } } } } } } .honor_box{ background: #f7f7f7; .honor_cen{ padding-bottom:116px; padding-top:250px; ul{ width:110%; li{ width:26.66%; float:left; background-color: #fff; box-shadow: inset 0 3px 0 #eee; margin-right:5.45%; padding:0 3.63%; box-sizing:border-box; padding-top:94px; position:relative; border-top:3px solid #eee; min-height:500px; top:50px; @include opacity(0); &.animate{ top:0; @include opacity(1); transition:top 0.6s ease-out,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1),background 0.5s; } &.even{ margin-top:-100px; } @media(max-width:1400px){ padding:0 2%; padding-top:70px; min-height:440px; } &:hover{ .line{ width:100%; left:0; } .ico{ border-color:$color; img{ @include opacity(0); &.active{ @include opacity(1); } } } .t{ color:#333; } .text{ color:#333; } } .line{ position:absolute; width:0%; height:3px; background:$color; left:50%; top:0; transition:0.5s; margin-left:0; } .ico{ border:1px solid #666; width:160px; height: 160px; border-radius:50%; background: #fff; position:absolute; left:50%; transition:0.5s; margin-left:-80px; top:-80px; @media(max-width:1400px){ width:120px; height: 120px; top:-60px; margin-left:-60px; } img{ position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; max-width:100%; transition:opacity 0.5s; max-height:100%; &.active{ @include opacity(0); } } } .t{ @include fz(30px,60px); color:#666; text-align: center; transition:color 0.5s; font-weight:bold; } .text{ @include fz(16px,30px); color:#999; transition:color 0.5s; margin-top:28px; @media(max-width:1400px){ @include fz(14px,28px); margin-top:15px; } } } } } } .cop_box{ background: #f7f7f7; .cop_main{ padding-top:90px; padding-bottom:90px; .cooperation_cen{ background: #fff; padding-bottom:90px; @extend .top; .cop_top{ padding-top:60px; .t{ @include fz(30px,50px); color:#333; font-weight:bold; } .content{ @include fz(16px,28px); color:#666; img{ max-width:100%; height: auto !important; margin:20px 0; } } } .co_bot{ margin-top:45px; .t{ @include fz(30px,50px); color:#333; font-weight:bold; } .wrap{ margin-top:28px; .wrap_r{ float: right; width:290px; height: 506px; overflow: hidden; @media(max-width:1400px){ width:242px; height: 422px; } ul{ li{ margin-bottom:10px; width:290px; height: 162px; overflow: hidden; cursor:pointer; position:relative; @media(max-width:1400px){ width:242px; height:138px; margin-bottom:4px; } &.active{ .border{ @include opacity(1); } } .border{ position:absolute; width:100%; height: 100%; border:3px solid #f08200; box-sizing:border-box; left:0; top:0; @include opacity(0); } img{ width:100%; height: auto; } } } } .wrap_l{ float:left; width:888px; height: 506px; overflow: hidden; position:relative; @media(max-width:1400px){ width:740px; height: 422px; } .btn{ position:absolute; right:0; bottom:0; z-index:10; display: inline-block; div{ width:50px; height: 50px; float: left; cursor:pointer; transition:background 0.5s; &.prev{ background:url(/wbwimg/pl.html) no-repeat center center #fff; &:hover{ background:url(/wbwimg/pl2.html) no-repeat center center $color; } } &.next{ background:url(/wbwimg/pr.html) no-repeat center center #fff; &:hover{ background:url(/wbwimg/pr2.html) no-repeat center center $color; } } } } ul{ height: 100%; li{ width:888px; height: 100%; float:left; overflow: hidden; @media(max-width:1400px){ width:740px; } img{ width:100%; height: auto; } } } } } } } } } } &.investor{ .nav_top{ background-color: #fff; box-shadow: 0 0 5px rgba(141,141,141,.2); width:100%; &.fix{ position:fixed; left:0; z-index:1000; top:0; } .nav_top_cen{ ul{ font-size:0; text-align: center; li{ // float:left; display: inline-block; vertical-align: top; width:20%; height:80px; border-right:1px solid #dfdfdf; box-sizing:border-box; text-align: center; padding:0 5px; box-sizing:border-box; cursor:pointer; position:relative; cursor:pointer; &:hover{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } &.cur{ .bg{ transform:scalex(1); width:100%\9; transform-origin:left center; } .tab{ .tab_cell{ color:#fff; } } } .bg{ position:absolute; left:0; // transition:width 0.5s; transform:scalex(0); transform-origin:right center; transition:transform 0.4s ease,width 0.4s ease; top:0; width:100%; height:100%; background: #005bac; transform:scalex(0)\9; width:0\9; } a{ display: block; width:100%; height:100%; position:absolute; left:0; top:0; } .tab{ width:100%; height:100%; display:table; position:relative; z-index:10; .tab_cell{ transition:color 0.5s; display: table-cell; vertical-align: middle; @include fz(18px,24px); color:#666; @media(max-width:1400px){ font-size:16px; } } } } } } } .investor_box{ background: #f7f7f7; padding-bottom:90px; .investor_box_cen{ padding-top:70px; @extend .top; padding-bottom:85px; .list{ .paging{ margin-top:50px; } ul{ li{ background: #fff; border-bottom:1px solid #dfdfdf; a{ display: block; position:relative; &:hover{ .bg{ transform-origin:top center; transform:scaley(1); opacity:1\0; filter:alpha(opacity=100)\0; } .cont{ .t{ color:#fff; background:url(/wbwimg/fd2.html) no-repeat left center; } .year{ color:#fff; } } } .bg{ position:absolute; width:100%; height:100%; background:$color; transform-origin:bottom center; transform:scaley(0); transition:transform 0.4s ease; transform:scaley(1)\0; opacity:0\0; filter:alpha(opacity=0)\0; } .cont{ position:relative; z-index:10; padding:37px 50px; .t{ transition:background 0.4s ease,color 0.4s ease; @include fz(18px,26px); color:#666; float:left; padding-left:55px; width:70%; box-sizing:border-box; background:url(/wbwimg/fd.html) no-repeat left center; } .year{ transition:color 0.4s ease; float: right; @include fz(14px,26px); color:#999; } } } } } } } .problem{ padding-top:20px; ul{ li{ @extend .top; margin-top:52px; .question{ padding-left:110px; position:relative; .icon{ width:100px; height: 100px; overflow: hidden; position:absolute; left:0; top:0; img{ width:100%; height: auto; } } .tit{ .con{ display: inline-block; border-radius:0 10px 10px 10px; background-clip: padding-box; background-color: #fff; height: 100px; @include fz(18px,30px); padding:0 45px; color:#333; font-weight:bold; position:relative; .ico{ width:27px; height: 41px; background:url(/wbwimg/q1.html) no-repeat; position:absolute; left:-27px; top:0; } .tab{ width:100%; height:100%; display:table; .tab_cell{ display: table-cell; vertical-align: middle; } } } } } .anwser{ position:relative; min-height:100px; margin-top:30px; padding-right:110px; .icon{ position:absolute; right:0; top:0; width:100px; height:100px; overflow: hidden; img{ width:100%; height: auto; } } .cont{ background: #eee; @include fz(16px,30px); color:#333; border-radius:10px 0 10px 10px; padding:42px 50px; position:relative; .ico{ width:27px; height: 41px; background:url(/wbwimg/a1.html) no-repeat; position:absolute; right:-27px; top:0; } table{ width:100%; display: block; margin-bottom:32px; tr{ td{ text-align: center; border:1px solid #ccc; text-align: center; @include fz(16px,30px); color:#333; padding-top:15px; padding-bottom:15px; box-sizing:border-box; &.tl{ text-align: left; padding-left:30px; padding-right:30px; } } } } } } } } } } } &.contact{ .contact_box{ background: #f7f7f7; padding-top:70px; padding-bottom:90px; .contact_top{ @extend .top; border:1px solid #dfdfdf; #map{ width:62%; float:left; border-right:1px solid #dfdfdf; height: 450px; box-sizing:border-box; .anchorbl{ display: none; } .con{ margin-top:10px; @include fz(16px,24px); color:#666; } .t{ @include fz(18px,30px); color:#333; font-weight:bold; } } .content{ float: right; height: 450px; width:38%; background: #fff; padding:0 30px; box-sizing:border-box; .t{ @include fz(24px,36px); color:#333; padding-bottom:14px; border-bottom:1px solid #dfdfdf; font-weight:bold; padding-left: 20px; padding-top:42px; } .name{ @include fz(18px,38px); color:#333; margin-top:22px; margin-left:20px; padding-left:30px; font-weight:bold; background:url(/wbwimg/d.html) no-repeat left center; } .con{ margin-top:15px; padding-left:20px; @include fz(16px,32px); color:#666; } } } .list{ ul{ li{ width:48.66%; background: #fff; border:1px solid #dfdfdf; height: 260px; margin-top:2.68%; @extend .top; padding:0 30px; box-sizing:border-box; .t{ @include fz(24px,40px); color:#333; font-weight:bold; border-bottom:1px solid #dfdfdf; padding:40px 20px 12px 20px; } .con{ padding:0 20px; @include fz(16px,28px); color:#666; margin-top:34px; @media(max-width:1400px){ margin-top:20px; } } } } } } } } .vwrap{ position:fixed; width:100%; height:100%; left:0; top:0; z-index:10001; @include opacity(0); visibility: hidden; &.active{ @include opacity(1); visibility: visible; } .jwlogo{ display: none; } .close{ width:32px; height:32px; position:absolute; background:url(/wbwimg/close.html) no-repeat; background-size:cover; top:-40px; cursor:pointer; right:0px; @media(max-width:850px){ width:24px; height:24px; background-size:cover; top:-34px; } } .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background:#000; @include opacity(0.5); } .video_b{ position:absolute; width:1000px; left:50%; height:500px; top:50%; margin-top:-250px; background: #000; margin-left:-500px; } } .footer{ .footer_top{ background: #333; padding-top:60px; padding-bottom:62px; .foot_cen{ .link_box{ float:left; ul{ li{ float: left; margin-right:80px; @media(max-width:1540px){ margin-right:60px; } @media(max-width:1460px){ margin-right:50px; } @media(max-width:1400px){ margin-right:40px; } @media(max-width:1350px){ margin-right:30px; } @media(max-width:1250px){ margin-right:22px; } &.last{ margin-right: 0; } .large{ display: block; @include fz(18px,20px); color:#fff; } .links{ margin-top:13px; a{ display: block; @include fz(14px,30px); color:#9f9f9f; transition:color 0.3s; &:hover{ color:#fff; } } } } } } .code{ float: right; margin-right:70px; padding-left:90px; border-left:1px solid #444; @media(max-width:1540px){ margin-right:50px; padding-left:70px; } @media(max-width:1500px){ padding-left:50px; } @media(max-width:1300px){ padding-left:40px; margin-right:30px; } .code_img{ width:120px; height:120px; border-radius:5px; background: #fff; margin:0 auto; img{ width:100%; border-radius:5px; } } .txt{ @include fz(16px,24px); color:#666; text-align: center; margin-top:10px; } } .msg{ float: right; width:270px; .tel{ padding-left:50px; background:url(/wbwimg/tel.html) no-repeat left center; .txt{ @include fz(16px,26px); color:#959595; } .number{ @include fz(24px,32px); color:#fff; @extend .bold; // font-weight:bold; } } .share{ margin-top:30px; margin-left:50px; a{ transition:opacity 0.3s; cursor:pointer; margin-right:15px; &:hover{ @include opacity(0.8); } } } } } } .foot_bot{ background: #222; padding:21px 0; .foot_bot_cen{ .k8凯发官方网站 copyright{ float:left; @include fz(14px,38px); color:#666; a{ transition:opacity 0.3s; color:#666; &:hover{ color:#fff; } } } .fbox{ float: right; .contact{ @include fz(16px,38px); color:#fff; float:left; } .friendship{ float: left; width:200px; position:relative; margin-left:25px; .show{ border-radius: 3px; cursor:pointer; background-color: #383838; .txt{ @include fz(14px,38px); color:#999; padding-left:70px; float: left; } i{ display: block; float: right; width:8px; height:38px; background:url(/wbwimg/s.html) no-repeat center center; margin-right:15px; } } .hide{ position:absolute; width:100%; bottom:100%; left:0; background: #383838; display: none; a{ display: block; @include fz(14px,38px); color:#999; border-bottom:1px solid #333; padding-left:30px; transition:color 0.3s; &:hover{ color:#fff; } } } } } } } } .paging{ text-align: center; font-size:0; margin-top:70px; a{ margin:2px; width:44px; height: 44px; background: #fff; @include fz(18px,44px); color:#ccc; display: inline-block; vertical-align: top; text-align: center; transition:background 0.3s,color 0.3s; &.active{ background: #005bac; color:#fff; } &:hover{ background: #005bac; color:#fff; } } } .search-alert{ position: fixed; z-index: 1000; background-color: #222222; left: 0; top: 0; width: 100%; height: 100%; display: none; .close{ display: block; width:24px; height:24px; background:url(/wbwimg/close.html) no-repeat center center; position: absolute; top: 38px; right: 2.6%; transition:transform 0.4s ease; cursor:pointer; @media(min-width:1024px){ &:hover{ transform:rotate(180deg); } } @media(max-width:1024px){ top:20px; right:20px; } } .cent-form{ width:80%; height:124px; position:absolute; left:50%; margin-left:-40%; top:50%; margin-top:-62px; border-bottom: 1px solid #515151; .tex{ border: none; font-size: 30px; height: 124px; line-height: 124px; text-align: center; width: 100%; box-sizing: border-box; color: #555; background: none; padding-left: 88px; padding-right: 80px; background: url(/wbwimg/img5.html) no-repeat 35px center; } .sub-btn{ border: none; height: 124px; font-size: 24px; line-height: 124px; color: #555; text-align: right; background: none; position: absolute; right: 0; top: 0; background:none; width: 100px; text-align: center; } } }
网站地图