.ser_body .case_n_1bg{ background: linear-gradient(135deg,rgba(0, 0, 0, 0) 0%,rgba(14, 51, 157, 0.5) 100%); } .case_n_1.ser_0 { background-color: #000; } .ser_0 iframe{ opacity: 1; display: block; position: absolute; top: 10%; left: 0; width: 100%; height: 90%; content: ' '; z-index: 2; } .ser_0 .case_n_1d span { background: rgba(68, 75, 93, 0.62); } .ser_0{ min-height: 600px; } .ser_0 .case_n-content { /*bottom: 200px;*/ } .ser_1 { } .ser_1a { padding: 50px 20px 50px 0px; } .ser_1 { background: #fdc83f; background: #fff; width: 100%; z-index: 9;position: relative; padding-top: 0px; margin-bottom: 140px; margin-top: 0px; position: relative; } .ser_1::before{ position: absolute; content: ""; display: block; right: 0; top: 50px; height: 400px; background: #fdc83f; width: 52%; border-radius: 5px 0 0 5px; } .ser_1a .fl { width: 50%; padding-top: 55px; } .ser_1a .fl .pad{ padding-right: 20px; } .ser_1a .fl span{ font-size: 2.6rem; line-height: 1.2; letter-spacing: -2px; padding-bottom: 40px; display: block; } .ser_1a .fl h2{ font-size: 2rem; } .ser_1a .fl p{ font-size: 1rem; padding-top: 10px; padding-right: 100px; } .ser_1a .rt { width: 50%; } .ser_1a .rt img{ width: 80%; display: block; max-height: 350px; padding-top: 30px; position: relative; z-index: 2; } .ser_l_2 { } .ser_l_2 .case_l_3b .case_l_3b_tt::before { display: none; } .ser_l_2 .case_l_3b .case_l_3b_tt { background: #fdc83f; color: #fff; color: #222; font-weight: normal; padding: 0px 20px 0px 0px; top: 22%; left: 50%; width: 280px; text-align: right; margin-left: -320px; font-size: 22px;letter-spacing: 1px; border-radius: 2px; text-transform: uppercase; } .ser_l_2 .c_l2 .case_l_3b .case_l_3b_tt { padding: 0px 20px 0px 20px; width: 330px; left: auto;letter-spacing: 0.5px; right: 50%; margin-right: -365px; text-align: left; margin-left: 0px; } .ser_l_2 .case_3_c { margin-top: 60px; } .ser_l_2 .case_l_3a1 { background: url('/cs19/test11.jpg') no-repeat left center fixed; background-size: contain; } .ser_l_2 .case_l_3a1.a1bg { background: url('/cs19/fuwu/12.jpg') no-repeat 0 center fixed; background-size: contain; } .ser_l_2 .case_l_3a1.a2bg { background: url('/cs19/fuwu/5.jpg') no-repeat right center fixed; background-size: contain; } .ser_l_2 .case_l_3a1.a3bg { background: url('/cs19/fuwu/6.jpg') no-repeat left center fixed; background-size: contain; } .ser_l_2 .case_l_3a1.a4bg { background: url('/cs19/fuwu/8.jpg') no-repeat right center fixed; background-size: contain; } .ser_l_2 .c_l2 .case_3_c a { margin-left: 0px; margin-right: 0px; } .ser_l_2 .case_3_c .pad { margin-left: 100px; margin-right: 150px; } .ser_l_2 .case_3_c h3 { font-size: 2rem; } .ser_l_2 .ser_t2{ margin-top: 64px; } .case_3_c .svg .ico { background-position: center; background-repeat: no-repeat; margin-right: 20px; width: 35px; height: 35px; display: inline-block; } .ser_l_2 .case_3_c p { padding-bottom: 20px; } .case_3_c .svg { margin-bottom: 40px; } .ser_l_2 .case_3_c a { margin: 0 auto; } .ser_web.svg .ico1 { background-image: url('/cs19/svg/html52.svg'); background-size: cover; } .ser_web.svg .ico2 { background-image: url('/cs19/svg/css.svg'); background-size: cover; } .ser_web.svg .ico3 { background-image: url('/cs19/svg/html3.svg'); background-size: 100%; background-position: center; } .ser_web.svg .ico4 { background-image: url('/cs19/svg/Web.svg'); background-size: cover; } .ser_web.svg .ico5 { background-image: url('/cs19/svg/js.svg'); background-size: cover; } .ser_seo.svg .ico1 { background-image: url('/cs19/svg/seo.svg'); background-size: cover; } .ser_seo.svg .ico2 { background-image: url('/cs19/svg/google2.svg'); background-size: 100%; width: 33px; } .ser_seo.svg .ico3 { background-image: url('/cs19/svg/baidu2.svg'); background-size: cover; } .ser_seo.svg .ico4 { background-image: url('/cs19/svg/seo3.svg'); background-size: 100%; } .ser_h5.svg .ico1 { background-image: url('/cs19/svg/h51.svg'); background-size: cover; } .ser_h5.svg .ico2 { background-image: url('/cs19/svg/h55.svg'); background-size: 100%; } .ser_h5.svg .ico3 { background-image: url('/cs19/svg/h53.svg'); background-size: 100%; width: 33px; } .ser_h5.svg .ico4 { background-image: url('/cs19/svg/h54.svg'); background-size: 100%; } .ser_brand.svg .ico1 { background-image: url('/cs19/svg/br1.svg'); background-size: 100%;width: 33px;	opacity: .6; } .ser_brand.svg .ico2 { background-image: url('/cs19/svg/br2.svg'); background-size: 100%;width: 33px;	opacity: .7; } .ser_brand.svg .ico3 { background-image: url('/cs19/svg/br3.svg'); background-size: cover; } .ser_brand.svg .ico4 { background-image: url('/cs19/svg/br4.svg'); background-size: cover;	opacity: .8; } .ser_l_3 { margin-top: 0px; padding-bottom: 60px; background: #fafafa; position: relative; background: -webkit-gradient(linear, left top, right top, from(#0e1d2c), to(#1e476d )); background: -webkit-linear-gradient(left, #0e1d2c 0%, #1e476d 100%); background: -o-linear-gradient(left, #0e1d2c 0%, #1e476d 100%); background: linear-gradient(90deg, #0e1d2c 0%, #1e476d 100%); } .ser_l_3a { padding-top: 50px; color: #FFF; } .ser_l_3b { text-align: center; } .ser_l_3b h3{ font-size: 42px; letter-spacing: -1px; font-weight: bold; } .ser_l_3b p{ font-size: 22px; } .ser_l_3b span{ font-size: 16px; padding-top: 10px; display: block; } .ser_l_3c { padding: 30px 50px; border-radius: 10px; background: #fff; color: #333; width: 60%; max-width: 780px; margin: 50px auto; } .ser_l_3c label{ display: block; padding: 20px 20px; text-align: center; } .ser_l_3c label input{ margin: 0px auto; width: 100%; height: 40px;	text-indent: 10px; line-height: 40px; margin-top: 3px; } .ser_l_3c label span { text-align: left; font-size: 18px; display: block; } .ser_l_3c label span i{ font-size: 13px; padding-left: 10px; } .ser_l_3c .ser_content input{ height: 120px; } .ser_l_3c .fbotton { } .ser_l_3c .fbotton input,.ser_l_3c .fbotton SPAN{ TEXT-ALIGN: center;background-color: #ffffff; border: 2px solid #173db2; font-size: 14px; color: #173db2; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px 50px 50px 50px; padding: 10px 50px; margin: 20px auto 0; display: block; } .ser_l_3c .fbotton input:hover { background-color: #173db2; color: #fff; } .ser_new { background: #eee; padding: 50px 0;    overflow-x: hidden; } .srv_2{ padding: 120px 0 300px; text-align: center; background: url(/m11/m4/trame-bg.png) repeat 50% -50px #ededed fixed; } .srv_2 span { font-size: 32px; color: #3b3b3b; line-height: 45px; text-align: center; } .srv_2 p { font-size: 16px; color: #5a5a5a; line-height: 22px; margin: 10px auto 80px; text-align: center; } .sview { display: block; height: 35px; line-height: 35px; text-align: center; position: relative; border: 2px solid #FFFFFF; overflow: hidden; width: 160px; border-radius: 4px; } .ab_baner { background: #000; height: 100vh; } .sview div{ position: relative; display: inline-block; z-index: 2; font-size: 14px; color: #fff; text-transform: uppercase; -moz-transition-property: color; -o-transition-property: color; -webkit-transition-property: color; transition-property: color; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .sview:hover div { color: #fff } .sview:after { content: ""; position: absolute; width: 120%; height: 100%; left: -10%; top: 0; -moz-transform: translate(-110%, 0) skew(-20deg); -ms-transform: translate(-110%, 0) skew(-20deg); -webkit-transform: translate(-110%, 0) skew(-20deg); transform: translate(-110%, 0) skew(-20deg); background: #885FCA; z-index: 1; -webkit-animation: outHover 0.5s ease 1 forwards; -moz-animation: outHover 0.5s ease 1 forwards; -o-animation: outHover 0.5s ease 1 forwards; animation: outHover 0.5s ease 1 forwards; } .sview:hover:after { -webkit-animation-name: onHover; -moz-animation-name: onHover; -o-animation-name: onHover; -ms-animation-name: onHover; animation-name: onHover } @-moz-keyframes onHover { from { -moz-transform: translate(-110%, 0) skew(-20deg); transform: translate(-110%, 0) skew(-20deg) } to { -moz-transform: translate(0, 0) skew(-20deg); transform: translate(0, 0) skew(-20deg) } } @-webkit-keyframes onHover { from { -webkit-transform: translate(-110%, 0) skew(-20deg); transform: translate(-110%, 0) skew(-20deg) } to { -webkit-transform: translate(0, 0) skew(-20deg); transform: translate(0, 0) skew(-20deg) } } @keyframes onHover { from { -moz-transform: translate(-110%, 0) skew(-20deg); -ms-transform: translate(-110%, 0) skew(-20deg); -webkit-transform: translate(-110%, 0) skew(-20deg); transform: translate(-110%, 0) skew(-20deg) } to { -moz-transform: translate(0, 0) skew(-20deg); -ms-transform: translate(0, 0) skew(-20deg); -webkit-transform: translate(0, 0) skew(-20deg); transform: translate(0, 0) skew(-20deg) } } @-moz-keyframes outHover { from { -moz-transform: translate(0, 0) skew(-20deg); transform: translate(0, 0) skew(-20deg) } to { -moz-transform: translate(110%, 0) skew(-20deg); transform: translate(110%, 0) skew(-20deg) } } @-webkit-keyframes outHover { from { -webkit-transform: translate(0, 0) skew(-20deg); transform: translate(0, 0) skew(-20deg) } to { -webkit-transform: translate(110%, 0) skew(-20deg); transform: translate(110%, 0) skew(-20deg) } } @keyframes outHover { from { -moz-transform: translate(0, 0) skew(-20deg); -ms-transform: translate(0, 0) skew(-20deg); -webkit-transform: translate(0, 0) skew(-20deg); transform: translate(0, 0) skew(-20deg) } to { -moz-transform: translate(110%, 0) skew(-20deg); -ms-transform: translate(110%, 0) skew(-20deg); -webkit-transform: translate(110%, 0) skew(-20deg); transform: translate(110%, 0) skew(-20deg) } } #DoubleViewer{ margin: 0 auto; }