*{ margin: 0; padding: 0; font-family:"Microsoft YaHei"; font-size: 14px; } ul,li{ list-style: none; } a{ text-decoration: none; color: #3C3C3C; } body{ min-width: 1200px; } /*娓呴櫎娴姩*/ .fixed{ display: block; clear: both; } .overflow{ overflow: auto; zoom: 1; } /**/ .underline{ padding-bottom: 6px; border-bottom: 2px solid #0591AE; } /*Top start*/ #Navigation{ width: 1200px; height: 100px; margin: 0 auto; } #Navigation .logo{ width: 346px; height: 70px; margin-top: 14px; float: left; } #Navigation .logo img{ width: 70px; height: 70px; float: left; } #Navigation .logo h1{ display: block; font-size: 27px; font-weight: normal; margin: 4px 0px 0 76px; letter-spacing: 8px; } #Navigation .logo strong{ display: inline-block; font-weight: normal; margin: 5px 0 0 7px; color: #ff6e16; } #Navigation ul{ display: inline-block; float: right; padding: 0; list-style: none; margin-top:30px ; margin-left: 20px; } #Navigation ul li{ list-style: none; display: inline-block; } #Navigation ul span.split{ display: inline-block; height: 10px; border-left:2px solid gray ; } #Navigation ul li.home{ border-left: none; } #Navigation ul li:hover a,#Navigation a.on{ color: #0591AE; border-bottom: 2px solid #0591AE; } #Navigation ul li a{ display: inline-block; height: 30px; line-height: 30px; font-size: 16px; color: #333; text-decoration: none; padding: 5px 20px; } #search{ display: inline-block; margin-top: 39px; margin-left: 45px; display: none;; } #search input{ width: 158px; height: 25px; border: 0; float: left; outline: none; background: url(/static/img/www/search_text.png) no-repeat; padding-left:10px ; padding-right:12px ; } #search button{ width: 24px; height: 24px; background: url(/static/img/www/search.png); border: 0; padding: 0; margin-left: -30px; float: left; outline: none; cursor: pointer; } /*Top end*/ /*banner start*/ *{zoom:1} #main #banner{ position:relative; background:#000; margin:0 auto; } #main #banner .bd{ position:relative; z-index:0; } #main #banner .bd li img{width:100%; vertical-align:top; } #main #banner .hd{position:relative; z-index:1; margin-top:-30px; height:30px; line-height:30px; text-align:center; background:#000; filter:alpha(opacity=60);opacity:0.6 } #main #banner .hd ul{ text-align:center; padding-top:5px; } #main #banner .hd ul li{ cursor:pointer; display:inline-block; *display:inline; zoom:1; width:8px; height:8px; margin:5px; background:url(/static/img/www/tg_flash_p.png) -18px 0; overflow:hidden; font-size:0; } #main #banner .hd ul .on{ background-position:0 0; } #main #banner .prev,#main #banner .next{ z-index:1; display:block; width:55px; height:55px; position:relative; margin:-21% 0 0 3%; float:left; background:url(/static/img/www/arrow.png) 0 0 no-repeat; filter:alpha(opacity=40);opacity:0.4 } #main #banner .next{ background-position:right 0; float:right; margin-right:3% } #main #banner .prev:hover,#main #banner .next:hover{ filter:alpha(opacity=80);opacity:0.8 } /*banner end*/ /*index start*/ /*intent*/ #intent{ width: 100%; height:500px ; } #content h2{ width: 128px; text-align: center; height: 30px; font-size: 24px; font-weight: normal; margin: 40px auto; margin-bottom: 10px; } #intent>span{ font-size: 16px; display: block; width: 245px; height: 30px; margin: 15px auto; } #intent>ul{ text-align: center; } #intent>ul>li{ display: inline-block; width: 163px; height: 314px; margin: 5px 100px; } #intent>ul>li img{ width: 80px; height: 80px; } #intent>ul>li span{ font-size: 18px; display: block; padding: 24px 0; border-bottom: 1px solid #ccc; } #intent>ul>li ul li{ font-size: 14px; display: block; margin: 20px auto; } #case{ height: 700px; background-color:#F0F0F0 ; } #case ul{ width: 1200px; margin:20px auto; } #case ul li{ display: inline-block; float: left; } #case ul li img { width: 235px; height: 240px; padding: 5px; } #case ul li.first img { width: 454px; height: 495px; } #case>a{ font-size: 16px; color: #333; display: block; text-align: center; margin: 20px auto; width: 80px; height: 25px; line-height: 25px; padding: 7px 40px; background-color: white; border-radius: 22px; } #case>a:hover{ color: red; } #character{ height: 490px; } #character ul{ width: 1200px; margin: 10px auto; } #character ul li{ display: inline-block; width: 286px; height: 102px; margin: 45px 55px; float: left; } #character ul li img{ width: 86px; height: 80px; float: left; margin-right: 10px; } #character ul li h4{ font-size: 18px; font-weight: normal; display: inline-block; width: 180px; } #character ul li span{ font-size: 14px; display: inline-block; margin-top: 15px; float: left; width: 188px; } /*index end*/ /*service start*/ #small_banner img{ width: 100%; } #content{ margin: 20px auto 0px auto; width:1200px; } #content .service_wrap{ width: 1200px; margin: 0 auto 50px auto; } #content>span{ font-size: 16px; display: block; width: 320px; height: 30px; margin: 30px auto; } #content .service{ width: 100%; height: 362px; } #content .service p{ width: 49%; height: 362px; position: relative; } #content .service_wrap .left p{ float: left; } #content .service_wrap .right p{ float: right; } #content .service_wrap .left p span.title{ position: absolute; right: 10px; bottom:200px; } #content .service_wrap .left p span{ position: absolute; right: 10px; bottom: 170px; } #content .service_wrap .right p span.title{ position: absolute; left: 10px; bottom:200px; } #content .service_wrap .right p span{ position: absolute; left: 10px; bottom: 150px; } #content .service_wrap .left img{ float: right; } #content .service_wrap .right img{ float: left; } #content .service img{ width: 601px; height: 362px; } #content .service span.title{ display: block; width:100px ; text-align: center; font-size: 18px; font-weight: normal; margin-bottom: 10px; } #content .service span{ line-height: 24px; } /*service end*/ /*news start*/ #content .ir_news span.title,#content .it_news span.title{ color: #333333; } #content .ir_news li:hover span.title,#content .it_news li:hover span.title{ color: red; } #content .ir_news span.intro,#content .it_news span.intro{ letter-spacing: 2px; display: inline-block; text-indent: 2em; line-height: 24px; } #content .ir_news,#content .it_news{ width: 1200px; margin: 0 auto 50px auto; } #content .ir_news h2{ margin-bottom: 40px; } #content .ir_news .slideBox{ float: left; } #content .ir_news .slideBox img{ width: 540px; height: 312px; } #content .ir_news .newslist{ width: 550px; float: left; margin: 0px auto auto 20px; } #content .ir_news .newslist li{ /*margin-top: 10px;*/ /*padding-bottom: 10px;*/ border-bottom: 1px solid #ECECEC; } #content .ir_news .newslist li span.title{ font-size: 16px; display: inline-block; width: 80%; margin: 10px auto; } #content .ir_news .newslist li span.date{ font-size: 16px; display: inline-block; width: 18%; } #content div.it_news h2{ margin-bottom: 30px; } #content div.it_news li{ display: block; margin: 20px auto; } #content div.it_news li span.date{ display: inline-block; float: left; width: 80px; height: 80px; background-color: lightgray; } #content div.it_news li span.date .day{ display: block; text-align: center; margin: 19px auto 0 auto; font-size: 16px; } #content div.it_news li span.date .month{ display: block; text-align: center; } #content div.it_news li p{ display: inline-block; float: right; width: 1100px; height: 80px; } #content div.it_news li p span.title { display: block; margin-bottom: 10px; font-size: 16px; } /*news end*/ /*cases start*/ #content .cases{ width: 1200px; margin: 0 auto 50px auto; } #content div.cases ul li{ display: inline-block; width: 300px; margin: 30px 0px; margin-left: 75px; } #content div.cases ul li:hover a{ color: red; } #content div.cases ul li:hover img{ filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; } #content div.cases ul li img{ width:100%; height: 250px; } #content div.cases ul li span{ display: block; text-align: center; line-height: 24px; } /*case end*/ /*about start*/ #content .about,#content .develop{ width: 1200px; margin: 0 auto 50px auto; } #content .develop h2,#content .about h2{ margin-bottom: 40px; } #content .about img{ width: 590px; height: 300px; } #content .about p{ display: inline-block; float: right; margin-left: 10px; vertical-align: top; width: 595px; text-indent: 2em; letter-spacing: 1px; line-height: 25px; } #content div.develop .wrap{ height: 159px; position: relative; background: url(/static/img/www/develop.png) no-repeat; background-position: 565px 0; margin-top: -27px; } #content div.develop div.left span.title{ display: block; position: absolute; right: 52%; top:100px; } #content div.develop div.right span.title{ display: block; position: absolute; left:52%; top:100px; } #content div.develop div.left span.info{ display: block; position: absolute; right: 52%; top: 135px; } #content div.develop div.right span.info{ display: block; position: absolute; left: 52%; top: 135px; } /*about end*/ /*contact start*/ #content .recruit{ width: 1200px; margin: 0 auto; margin-bottom: 50px; } #content .recruit>span{ display: block; margin-bottom: 20px; text-align: center; } #content .position{ display: inline-block; float: left; width: 300px; min-height: 200px; margin: 35px 47px; background-color:#049AB9 ; border-radius: 5px; } #content .position span.title{ display: block; font-size: 16px; color: white; text-align: center; margin: 20px auto; } #content .position span.info{ display: block; color: white; margin: 20px 10px; } #content .message{ background-color: #F0F0F0; } #content .message .overflow{ width: 1200px; height: 640px; margin: 0 auto; } #content .message .info{ width: 335px; float: left; margin-left: 65px; } #content .message .info form span,#content .message .info form input,#content .message .info form button{ display: block; margin-top: 15px; } #content .message .info form input{ height: 30px; width: 313px; border-radius: 5px; background-color: white; } #content .message .info form textarea{ margin-top: 15px; width: 313px; height: 125px; border-radius: 5px; border-color: white; } #content .message .info button{ display: block; width: 110px; height: 30px; border-radius: 5px; border-color: white; margin: 20px auto; background-color: red; color: white; } #content .message .map{ width: 780px; float: left; } #content .message .map span{ display: block; margin: 20px auto; font-size: 16px; } #content .contact{ width: 1200px; margin: 0 auto; height: 450px; margin-top: 60px; } #content .contact>img{ width: 300px; height: 240px; float: left; margin-left: 200px; margin-top: 50px; } #content .contact .wrap{ width: 565px; height: 240px; float: left; margin-left: 70px; margin-top: 50px; } #content .contact .wrap .info{ position: relative; } #content .contact .wrap .logo img{ width: 70px; height: 70px; float: left; } #content .contact .wrap .logo p{ display: inline-block; width:380px; height: 39px; } #content .contact .wrap .logo p span.title{ letter-spacing: 8px; } #content .contact .wrap .logo p span{ display: block; margin: 10px; } #content .contact .wrap .info span{ display: block; margin: 10px; } #content .contact .wrap .info img{ width: 80px; height: 80px; position: absolute; right: 120px; bottom: 11px; } #allmap{ width: 750px!important; height: 450px!important; margin-top: 25px!important; margin-left: 50px!important; } /*contact end*/ /*newsdetail start*/ #content.newsdetail{ border: 1px solid #EAEAEA; padding: 10px; width: 1200px; margin: 20px auto; } #content.newsdetail .title h2{ width: auto; font-size: 18px; font-weight: normal; margin: 20px auto; } #content.newsdetail .title span{ display: block; text-align: center; } #content.newsdetail .share{ margin: 20px auto; padding-bottom: 10px; border-bottom: 1px dashed gray; } #content.newsdetail .share span{ display: inline-block; float: left; } #content.newsdetail .share a{ color: #333333; display: inline-block; line-height: 24px; height: 24px; padding-left: 35px; margin: 0 20px; } #content.newsdetail .share a.weixin{ background: url(/static/img/www/u278.png) no-repeat; background-position-y:2px ; } #content.newsdetail .share a.copy{ background: url(/static/img/www/u280.png) no-repeat; background-position-y:-6px ; } #content.newsdetail .share a.tencent{ background: url(/static/img/www/u282.png) no-repeat; background-position-y:-3px ; } #content.newsdetail .share a.sina{ background: url(/static/img/www/u284.png) no-repeat; background-position-y:-6px ; } #content.newsdetail .share a.qqZone{ background: url(/static/img/www/u286.png) no-repeat; background-position-y:-6px ; } #content.newsdetail .share a.kaixin{ background: url(/static/img/www/u288.png) no-repeat; background-position-y:-6px ; } #content.newsdetail .share a.renren{ background: url(/static/img/www/u290.png) no-repeat; background-position-y:-6px ; } #content.newsdetail .share a.douban{ background: url(/static/img/www/u292.png) no-repeat; background-position-y:-6px ; } #content.newsdetail .info{ min-height: 500px; } #content.newsdetail .info p{ text-indent: 2em; letter-spacing: 2px; line-height: 25px; } #content.newsdetail .link a{ } #content.newsdetail .link a.prev{ float: left; } #content.newsdetail .link a.next{ float: right; } /*newsdetail end*/ /*footer start*/ #footer{ background-color:rgb(75, 92, 102); } #footer .wrap{ width: 1200px; margin: 0 auto; padding: 44px 0 20px 0; } #footer .wrap .nav{ height: 26px; margin: 0 auto; width: 1200px; text-align: center; } #footer .wrap .nav li{ display: inline-block; border-right: 2px solid #B7B7B7; } #footer .wrap .nav li a{ display: inline-block; color: white; line-height: 26px; margin:0 26px; font-size: 16px; } #footer .Link{ } #footer .Link h3{ font-size: 16px; color: white; font-weight: normal; margin-top: 20px; padding-bottom: 10px; border-bottom:1px solid #BFBFBF; } #footer .Link ul { margin: 10px 0; } #footer .Link ul li{ display: inline-block; margin: 30px 13px; } #footer .Link ul li a{ display: inline-block; color: white; text-align: center; } #footer .Link ul li a span{ display: block; margin-top: 20px; font-size: 13px; } #footer .contact{ width: 650px; margin: 0 auto; } #footer .contact img{ width: 80px; height: 80px; float: left; } #footer .contact p{ float: left; width: 530px; margin-left: 40px; } #footer .contact p span{ color: white; font-size: 14px; display: block; margin-bottom:5px; } #footer .copyright{ #width: 655px; text-align:center; color: white; margin: 0 auto; font-size: 14px; margin-top: 20px; } #chat{ position: fixed; left: 50%; top: 50%; width: 500px; height: 450px; margin-top: -250px; margin-left: -250px; border: 2px solid #3c8b3c; border-radius: 4px; background-color: white; z-index: 1 } /*footer end*/ .animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .livechat-girl { width: 60px; height: 60px; border-radius: 50%; border: 2px solid darkturquoise; position: fixed; bottom: 0; right: 40px; opacity: 0; -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); z-index: 700; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); transition: all 1s cubic-bezier(.86, 0, .07, 1); } .livechat-girl:focus { outline: 0 } .livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) } .livechat-girl:after { content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #26c7fc, #26c7fc); position: absolute; right: 1px; top: 1px; z-index: 50 } .livechat-girl .girl { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 50 } .livechat-girl .animated-circles .circle { background: rgba(38,199,252,.25); width: 60px; height: 60px; border-radius: 50%; position: absolute; z-index: 49; transform: scale(1); -webkit-transform: scale(1) } .livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards } .livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards } .livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards } .livechat-girl.animation-stopped .circle { opacity: 0!important } .livechat-girl.animation-stopped .circle { opacity: 0!important } .livechat-girl .livechat-hint { position: absolute; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) } .livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 1 } .livechat-girl .livechat-hint.hide_hint { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0) } .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important } .livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis } @media only screen and (max-width:1599px) { .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px!important } } @media only screen and (max-width:1309px) { .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px!important } } @media only screen and (max-width:1124px) { .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px!important } } .rd-notice-tooltip { -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 14px; border-radius: 3px; line-height: 1.25; position: absolute; z-index: 65; max-width: 350px; opacity: 1 } .rd-notice-tooltip:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50 } .rd-notice-tooltip .rd-notice-content { background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 20px; font-weight: 400; line-height: 1.45 } .rd-notice-type-success { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) } .rd-notice-type-success .rd-notice-content { background-color: #26c7fc } .rd-notice-type-success:after { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) } .rd-notice-position-left { margin-left: -20px } .rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px } .rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap }