styleos.css 145 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150
  1. /* CSS Document */
  2. html, body {font-size: 12px;margin: 0px;padding: 0px;text-decoration: none;font-family: "微软雅黑";background: #f7f7f7;text-align: center;-webkit-text-size-adjust: none;}
  3. a { color: #666666;text-decoration: none;outline: 0px none; star:expression(this.onFocus=this.blur());}
  4. a:hover, a:active { color:#d82128;}
  5. * { margin: 0px;padding: 0px;list-style: none;}
  6. table { border-collapse: collapse;}
  7. ul, li {list-style: none;border: 0 none;padding: 0px;}
  8. form {margin: 0px;}
  9. img {border: 0px none;text-align-last: center;vertical-align: middle;_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true);}
  10. center {text-align: left; color: #999;height: 50px;}
  11. #dhtmltooltip {z-index: 100;visibility: hidden; position: absolute;text-align: left;border: 1px solid #ccc;}
  12. #clear, .clear {clear: both;float: none;background: none;width: 0 !important; height: inherit !important;}
  13. #noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0px;}
  14. .fl-left{ float:left; text-align:left;}
  15. .fl-right{ float:right; text-align:right;}
  16. @font-face {font-family: "iconfont";
  17. src: url('http://www.gwsoft.com.cn/font/iconfont.eot?t=1499072069847'); /* IE9*/
  18. src: url('http://www.gwsoft.com.cn/font/iconfont.eot?t=1499072069847') format('embedded-opentype'), /* IE6-IE8 */
  19. url('http://www.gwsoft.com.cn/font/iconfont.woff?t=1499072069847') format('woff'), /* chrome, firefox */
  20. url('http://www.gwsoft.com.cn/font/iconfont.ttf?t=1499072069847') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  21. url('http://www.gwsoft.com.cn/font/iconfont.svg?t=1499072069847') format('svg'); /* iOS 4.1- */
  22. }
  23. @font-face { font-family: myFont; src: url('http://www.gwsoft.com.cn/font/AkzidenzGrotesk-BoldCond.otf');}
  24. @font-face { font-family: myFontBQ-Light; src: url('http://www.gwsoft.com.cn/font/AkzidenzGrotesk-Light.otf');}
  25. .iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
  26. .eshion-logo:before { content: "\e600"; }
  27. .sns-logo:before { content: "\e601"; }
  28. .sns-logoname:before { content: "\e602"; }
  29. .icon-menu:before { content: "\e6b1"; }
  30. .icon-minus:before { content: "\e620"; }
  31. .icon-plus:before { content: "\e622"; }
  32. .icon-en:before { content: "\e696"; }
  33. .icon-plus-circle:before { content: "\e6e0"; }
  34. .icon-close:before { content: "\e6e9"; }
  35. .icon-coordinates_fill:before { content: "\e6ec"; }
  36. .icon-coordinates:before { content: "\e6ed"; }
  37. .icon-minus-circle:before { content: "\e712"; }
  38. .icon-time:before { content: "\e735"; }
  39. .icon-undo:before { content: "\e739"; }
  40. .icon-search:before { content: "\e741"; }
  41. .icon-left:before { content: "\e720"; }
  42. .icon-right:before { content: "\e6f8"; }
  43. .icon-up:before { content: "\e749"; }
  44. .icon-down:before { content: "\e74a"; }
  45. /*
  46. 头部
  47. -----------------------------------------------------------------*/
  48. #head { position:fixed; z-index:1001; left:0; top:0; width:100%;height:70px;margin: 0px auto; transition:all .35s;background:#ffffff;}
  49. #head .wrap{ width:90%; margin:0px auto;}
  50. #head .logo{ width:400px; text-align:left; overflow:hidden; transition:all .35s;}
  51. #head .logo a{ position:relative; display:block; height:100px; overflow:hidden; transition:all .35s;}
  52. #head .logo a i{ display:block;transition:all .35s;}
  53. #head .logo a img{ position:absolute; left:0; top:13px;}
  54. #head .menu{height:70px; line-height:70px;}
  55. #head .menu>li{float:left; text-align:center;position: relative;}
  56. #head .menu>li.btnwap{ display:none!important;}
  57. #head .menu>li:last-child{ background:none !important;}
  58. #head .menu>li>a{position:relative; padding:0px 20px;font-size:16px; color:#000; text-align:center; line-height:70px; display:inline-block; transition:all .25s;}
  59. #head .menu>li>a:after{position:absolute; left:0; bottom:0; width:0; height:3px; background:#d82128; font-size:0; content:''; display:block; transition:all .18s;}
  60. #head .menu>li.A>a:after{width:100%;}
  61. #head .menu>li.A>a{ color:#d82128 !important;}
  62. #head .menu>li>div{position:relative;width:100%; border-top:1px solid #f0f0f0; background:rgba(255,255,255,1); box-shadow:0px 2px 3px rgba(0,0,0,.1); position:absolute; z-index:1000; left:0; top:70px; overflow:hidden; display:none; transition:top .35s;}
  63. #head .menu>li>div .box-about{ width:85%;height:auto; margin:0px auto; overflow:hidden; padding:50px 0;}
  64. #head .menu>li>div .box-about .title{ display:block; height:auto; font-size:20px; font-weight:bold; color:#333;}
  65. #head .menu>li>div .box-about .about{ width:65%; height:auto; text-align:left;}
  66. #head .menu>li>div .box-about .about .img{ width:40%;}
  67. #head .menu>li>div .box-about .about .img>img{ width:100%; height:auto;}
  68. #head .menu>li>div .box-about .about .text{ width:55%; font-size:14px; text-align:left;line-height:23px; color:#777;}
  69. #head .menu>li>div .box-about .about .text p{ margin:10px 0;}
  70. #head .menu>li>div .box-about .about .text .more{ display:inline-block; margin-top:20px; text-align:center; background:#d82128; padding:0 35px; height:45px; line-height:45px; font-size:14px; color:#fff;}
  71. #head .menu>li>div .box-about .about .text .more:hover{text-decoration:underline;}
  72. #head .menu>li>div .box-about .honor{ width:15%; text-align:left; padding:0 5%;}
  73. #head .menu>li>div .box-about .honor .con{ display:block;}
  74. #head .menu>li>div .box-about .honor .con a{ display:block;border:1px solid #ddd;}
  75. #head .menu>li>div .box-about .honor .con a>img{ width:100%; height:auto;}
  76. #head .menu>li>div .box-about .honor .url{ padding:0;}
  77. #head .menu>li>div .box-about .honor .url a{ display:inline-block; margin-right:15px; color:#d82128; font-size:14px;}
  78. #head .menu>li>div .box-about .honor .url a>img{ margin-right:5px; width:25px; height:auto;}
  79. #head .menu>li>div .box-about .mod{ position:absolute; right:0; top:0; width:10%; height:100%; padding:50px 2%; background:#f7f7f7;border-left:1px solid #ddd; text-align:left;}
  80. #head .menu>li>div .box-about .mod>a{ display:block; height:40px; line-height:40px; font-size:16px; color:#d82128; transition:all .35s;}
  81. #head .menu>li>div .box-about .mod>a img{ opacity:0; transition:all .35s;}
  82. #head .menu>li>div .box-about .mod>a:hover img{ opacity:1; margin-left:5px;}
  83. #head .menu>li>div .box-pro{ width:85%; height:auto; margin:0px auto; overflow:hidden; padding:50px 0;}
  84. #head .menu>li>div .box-pro .title{ display:block; height:auto; font-size:20px; font-weight:bold; color:#333;}
  85. #head .menu>li>div .box-pro .prolist{ position:relative; width:30%; height:500px; text-align:left;background:url("http://www.gwsoft.com.cn/images/menu-prolist-bar.jpg") repeat-y;background-position:239px 0;}
  86. #head .menu>li>div .box-pro .prolist>li{ display:block; width:240px;}
  87. #head .menu>li>div .box-pro .prolist>li>a{ position:relative; display:block; font-size:14px; height:50px; line-height:50px;}
  88. #head .menu>li>div .box-pro .prolist>li.A>a{ color:#d82128; font-weight:bold;}
  89. #head .menu>li>div .box-pro .prolist>li.A>a:after{height:3px; background:#d82128;}
  90. #head .menu>li>div .box-pro .prolist>li>a:after{position:absolute; z-index:5; left:0; bottom:0; width:170px; height:1px; background:#ddd; content:''; transition:all .35s;}
  91. #head .menu>li>div .box-pro .prolist>li>a:hover{ background:url("http://www.gwsoft.com.cn/images/menu-prolist-arrow.jpg") no-repeat; background-position:100% 50%;}
  92. #head .menu>li>div .box-pro .prolist>li>a:hover:after{ height:3px; background:#d82128;}
  93. #head .menu>li>div .box-pro .prolist>li>div{ display:none; position:absolute; top:0; left:240px; width:200px; height:100%; padding-left:50px; transition:all .35s;}
  94. #head .menu>li>div .box-pro .prolist>li>div a{ display:block; height:50px; line-height:50px; color:#d82128; font-size:14px;}
  95. #head .menu>li>div .box-pro .prolist>li>div a:hover{ font-weight:bold; font-size:13px;}
  96. #head .menu>li>div .box-pro .prolist .pA{ color:#d82128;background:url("http://www.gwsoft.com.cn/images/menu-prolist-arrow.jpg") no-repeat; background-position:100% 50%;}
  97. #head .menu>li>div .box-pro .prolist .pA:after{height:3px; background:#d82128;}
  98. #head .menu>li>div .box-pro .prolist .pADiv{ display:block !important;}
  99. #head .menu>li>div .box-pro .newpro{ width:30%; text-align:left; padding:0 5%;}
  100. #head .menu>li>div .box-pro .newpro .con{ display:block; font-size:14px; border-bottom:1px solid #eee;}
  101. #head .menu>li>div .box-pro .newpro .con a{display:block; padding:20px 0; min-height:110px;}
  102. #head .menu>li>div .box-pro .newpro .con a>.img{ display:block; width:25%; text-align:left;}
  103. #head .menu>li>div .box-pro .newpro .con a>.img>img{ width:100%; height:auto;}
  104. #head .menu>li>div .box-pro .newpro .con a>.text{ display:block; width:70%; text-align:left; line-height:23px; color:#777;}
  105. #head .menu>li>div .box-pro .newpro .con a>.text h3{ font-weight:normal; color:#555; transition:all .35s;}
  106. #head .menu>li>div .box-pro .newpro .con a:hover .text h3{ color:#d82128;}
  107. #head .menu>li>div .box-pro .newpro .url{ padding:10px 0;}
  108. #head .menu>li>div .box-pro .newpro .url a{ display:inline-block; margin-right:15px; color:#d82128; font-size:14px;}
  109. #head .menu>li>div .box-pro .newpro .url a>img{ margin-right:5px; width:25px; height:auto;}
  110. #head .menu>li>div .box-pro .hotpro{ width:30%; text-align:left;}
  111. #head .menu>li>div .box-pro .hotpro .con{ display:block; font-size:14px;}
  112. #head .menu>li>div .box-pro .hotpro .con a{ display:block; padding:20px 0; min-height:110px; border-bottom:1px solid #eee;}
  113. #head .menu>li>div .box-pro .hotpro .con a:last-of-type{border-bottom:0!important;}
  114. #head .menu>li>div .box-pro .hotpro .con a>.img{ display:block; width:25%; text-align:left;}
  115. #head .menu>li>div .box-pro .hotpro .con a>.img>img{ width:100%; height:auto;}
  116. #head .menu>li>div .box-pro .hotpro .con a>.text{ display:block; width:70%; text-align:left; line-height:23px; color:#777;}
  117. #head .menu>li>div .box-pro .hotpro .con a>.text h3{ font-weight:normal; color:#555; transition:all .35s;}
  118. #head .menu>li>div .box-pro .hotpro .con a:hover .text h3{ color:#d82128;}
  119. #head .menu>li>div .box-pro .hotpro .url{ text-align:left;}
  120. #head .menu>li>div .box-pro .hotpro .url a{ display:inline-block; margin-right:15px; color:#d82128; font-size:14px;}
  121. #head .menu>li>div .box-pro .hotpro .url a>img{ margin-right:5px; width:25px; height:auto;}
  122. #head .menu>li>div .box-news{ width:85%; height:auto; margin:0px auto; overflow:hidden; padding:50px 0;}
  123. #head .menu>li>div .box-news .title{ display:block; height:auto; font-size:20px; font-weight:bold; color:#333;}
  124. #head .menu>li>div .box-news .com-news{ width:30%;}
  125. #head .menu>li>div .box-news .com-news a{ display:block; margin:0px; text-align:left;}
  126. #head .menu>li>div .box-news .com-news a .name{ display:block; height:auto; font-size:20px; font-weight:bold; color:#333;}
  127. #head .menu>li>div .box-news .com-news a .img{ padding:10px 0; max-height:200px; overflow:hidden;}
  128. #head .menu>li>div .box-news .com-news a .img>img{ width:100%; height:auto;}
  129. #head .menu>li>div .box-news .com-news a .text{font-size:14px;height:70px;line-height:23px; color:#777;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;}
  130. #head .menu>li>div .box-news .com-news a .more{ display:inline-block; margin-top:20px; text-align:center; background:#d82128; padding:0 35px; height:45px; line-height:45px; font-size:14px; color:#fff;}
  131. #head .menu>li>div .box-news .com-news a .more:hover{text-decoration:underline;}
  132. #head .menu>li>div .box-news .pro-news{ width:60%; text-align:left;}
  133. #head .menu>li>div .box-news .pro-news .con{ display:block; margin:0px; text-align:left;}
  134. #head .menu>li>div .box-news .pro-news .con>a{ display:block; float:left; width:30%; margin-right:3%;}
  135. #head .menu>li>div .box-news .pro-news .con>a .name{ font-size:14px;font-weight:bold; height:60px; line-height:60px; color:#333;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;}
  136. #head .menu>li>div .box-news .pro-news .con>a .img{width:80%; max-height:110px; overflow:hidden;}
  137. #head .menu>li>div .box-news .pro-news .con>a .img>img{ width:100%; height:auto;}
  138. #head .menu>li>div .box-news .pro-news .con>a .text{font-size:14px;height:70px;line-height:23px; color:#777;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;}
  139. #head .menu>li>div .box-news .pro-news .con>a .more{ display:inline-block; margin-right:15px; color:#d82128; font-size:14px;}
  140. #head .menu>li>div .box-news .pro-news .con>a .more>img{ margin-right:5px; width:25px; height:auto;}
  141. #head .menu>li>div .box-rd{ width:85%; height:auto; margin:0px auto; overflow:hidden;}
  142. #head .menu>li>div .box-rd .title{ display:block; height:auto; font-size:20px; font-weight:bold; color:#333;}
  143. #head .menu>li>div .box-rd .rd{ width:40%; text-align:left;}
  144. #head .menu>li>div .box-rd .rd .text{ font-size:14px;height:70px;line-height:23px; color:#777;}
  145. #head .menu>li>div .box-rd .rd .more{ display:inline-block; margin-top:20px; text-align:center; background:#d82128; padding:0 35px; height:45px; line-height:45px; font-size:14px; color:#fff;}
  146. #head .menu>li>div .box-rd .rd .more:hover{text-decoration:underline;}
  147. #head .menu>li>div .box-rd .idea{ width:25%; padding:0px 5%; text-align:left;}
  148. #head .menu>li>div .box-rd .idea .text{ font-size:14px;height:70px;line-height:23px; color:#777;}
  149. #head .menu>li>div .box-rd .idea .more>img{ width:25px; height:auto;}
  150. #head .menu>li>div .box-rd .interact{ width:25%; text-align:left;}
  151. #head .menu>li>div .box-rd span{display:block; height:30px;line-height:30px;}
  152. #head .menu>li>div .box-rd .interact .con>a .img{width:80%;}
  153. #head .menu>li>div .box-rd .interact .con>a .img>img{ width:100%; height:auto;}
  154. #head .menu>li>div .box-service{ width:85%; height:auto; margin:0px auto; overflow:hidden; padding:50px 0;}
  155. #head .menu>li>div .box-service .title{ display:block; height:auto; font-size:20px; font-weight:bold; color:#333;}
  156. #head .menu>li>div .box-service .dealers{ width:40%; text-align:left; margin-right:5%}
  157. #head .menu>li>div .box-service .dealers .text{ font-size:14px; width:100%;line-height:23px; color:#777;}
  158. #head .menu>li>div .box-service .dealers .more{ display:inline-block; margin-top:20px; text-align:center; background:#d82128; padding:0 35px; height:45px; line-height:45px; font-size:14px; color:#fff;}
  159. #head .menu>li>div .box-service .dealers .more:hover{text-decoration:underline;}
  160. #head .menu>li>div .box-service .network{ width:18%; text-align:left; margin-right:5%;}
  161. #head .menu>li>div .box-service .network .con{ display:block; margin:0px; text-align:left;}
  162. #head .menu>li>div .box-service .network .con>a{ display:block; line-height:30px;}
  163. #head .menu>li>div .box-service .network .con>a .img{width:100%;}
  164. #head .menu>li>div .box-service .network .con>a .img>img{ width:100%; height:auto;}
  165. #head .menu>li>div .box-service .network .con>a .text{height:70px; font-size:14px;line-height:23px; color:#777; padding:15px 0;}
  166. #head .menu>li>div .box-service .network .con>a .more{ height:40px; display:inline-block; margin-right:15px; color:#d82128; font-size:14px;}
  167. #head .menu>li>div .box-service .network .con>a .more>img{ margin-right:5px; width:25px; height:auto;}
  168. #head .menu>li>div .box-service .faq{ width:18%; text-align:left; margin-right:5%;}
  169. #head .menu>li>div .box-service .faq .con{ display:block; margin:0px; text-align:left;}
  170. #head .menu>li>div .box-service .faq .con>a{ display:block; line-height:30px;}
  171. #head .menu>li>div .box-service .faq .con>a .img{width:100%;}
  172. #head .menu>li>div .box-service .faq .con>a .img>img{ width:100%; height:auto;}
  173. #head .menu>li>div .box-service .faq .con>a .text{height:70px;font-size:14px;line-height:23px; color:#777; padding:15px 0;}
  174. #head .menu>li>div .box-service .faq .con>a .more{ display:inline-block; margin-right:15px; color:#d82128; font-size:14px;}
  175. #head .menu>li>div .box-service .faq .con>a .more>img{ margin-right:5px; width:25px; height:auto;}
  176. #head .menu>li>div .box-service .other{ width:9%; padding-top:35px; text-align:left;}
  177. #head .menu>li>div .box-service .other a{ display:block; padding:7px 0; margin-bottom:20px; background:#fff;border:3px solid #ddd; color:#666; font-size:15px; line-height:30px; text-align:center; transition:all .35s;}
  178. #head .menu>li>div .box-service .other a>span{ position:relative; display:block; width:45px; height:45px; margin:0px auto; overflow:hidden;}
  179. #head .menu>li>div .box-service .other a>span img{ position:absolute; z-index:9; left:0; top:0; width:100%; height:auto;}
  180. #head .menu>li>div .box-service .other a:last-child{ background:#d82128;border:3px solid #d82128; color:#fff;}
  181. #head .menu>li>div .box-service .other a:last-child>span img{ top:-45px;}
  182. #head .menu>li>div .box-service .other a:hover{ background:#fff; color:#d82128;border:3px solid #d82128;}
  183. #head .menu>li>div .box-service .other a:hover span img{ top:0;}
  184. #head .menu>li>div .box-human{ width:85%; height:auto; margin:0px auto; overflow:hidden; padding:50px 0;}
  185. #head .menu>li>div .box-human .title{ display:block; height:auto; font-size:20px; font-weight:bold; color:#333;}
  186. #head .menu>li>div .box-human .talents{ width:40%; text-align:left;}
  187. #head .menu>li>div .box-human .talents .text{ font-size:14px;height:70px;line-height:23px; color:#777;}
  188. #head .menu>li>div .box-human .talents .more{ display:inline-block; margin-top:20px; text-align:center; background:#d82128; padding:0 35px; height:45px; line-height:45px; font-size:14px; color:#fff;}
  189. #head .menu>li>div .box-human .talents .more:hover{text-decoration:underline;}
  190. #head .menu>li>div .box-human .jobs{ width:25%; padding:0px 5%; text-align:left;}
  191. #head .menu>li>div .box-human .jobs .text{ font-size:14px;height:70px;line-height:23px; color:#777;}
  192. #head .menu>li>div .box-human .jobs .more>img{ width:25px; height:auto;}
  193. #head .menu>li>div .box-human .self{ width:25%; text-align:left;}
  194. #head .menu>li>div .box-human .self .con>a .img{width:80%;}
  195. #head .menu>li>div .box-human .self .con>a .img>img{ width:100%; height:auto;}
  196. #head .search{ position:relative; padding-left:20px;height:100px; line-height:100px; text-align:right; overflow:hidden; transition:all .35s;}
  197. #head .search .icon-search{ font-size:23px; color:#fff; cursor:pointer;}
  198. #head .language{ padding-left:30px; height:100px; line-height:100px; text-align:right; transition:all .35s;}
  199. #head .language a>img{ height:30px; width:auto;}
  200. #head:hover{ background:#fff;}
  201. #head:hover .menu>li>a{color:#333;}
  202. #head:hover .search .icon-search{ color:#3a3e3f;}
  203. #head:hover .search .icon-search:hover{ color:#d82128;}
  204. #head.small{ height:70px; background:rgba(255,255,255,1); box-shadow:0px 1px 3px rgba(0,0,0,.1);}
  205. #head.small .logo a{ height:70px; line-height:70px;}
  206. #head.small .logo a img{top:14px;}
  207. #head.small .menu{height:70px; line-height:70px;}
  208. #head.small .menu>li>a{line-height:70px; color:#333;}
  209. #head.small .menu>li>div{top:70px;}
  210. #head.small .search{ height:70px; line-height:70px;}
  211. #head.small .search .icon-search{ color:#3a3e3f;}
  212. #head.small .language{ height:70px; line-height:70px;}
  213. #menuwap{ display:none;}
  214. .dilan{ margin-top:13px;}
  215. .dilan dl{ float: left; width:18.999%;}
  216. .dilan dl dt{ display: block; height:35px; line-height:35px; font-size:16px; color:#000; }
  217. .dilan dl dd{ height:30px; line-height:30px;}
  218. .dilan dl dd a{display: block;font-size:14px; color:#737373; }
  219. #search{ position:relative; margin-top:15px; float:left; width:0px; overflow:hidden; transition:all .35s;}
  220. #search form{ display:inline-block;width:94%; background:#d82128; border-radius:50px; padding:0 3%; text-align:left; overflow:hidden;}
  221. #search input[type="text"]{outline: medium;float:left;height:36px;line-height:36px;width:70%; padding:0 5%;border:none; font-family:微软雅黑; background:none;color:rgba(255,255,255,1);box-sizing:border-box;overflow:hidden;}
  222. #search input::-webkit-input-placeholder, #search textarea::-webkit-input-placeholder { color:rgba(255,255,255,.5);}
  223. #search button{ float:right;width:20%;height:36px;border:none; opacity:.8;background:url(http://www.gwsoft.com.cn/images/go.png) no-repeat center center;background-size:auto 100%;;cursor:pointer;box-sizing:border-box;overflow:hidden;}
  224. #search button:hover{ opacity:1;}
  225. @media only screen and (max-width: 1280px) {
  226. .dilan dl dt{font-size: 16px;}
  227. .dilan dl{width: 20%;}
  228. #head{ background:rgba(255,255,255,1);box-shadow:0px 1px 3px rgba(0,0,0,.1);}
  229. #head .logo{ width:300px;}
  230. #head .search .icon-search{ color:#3a3e3f;}
  231. #head .menu>li{ display:none!important;}
  232. #head .menu>li.btnwap{ display:inline-block!important;}
  233. #head .menu>li.btnwap a{ display:inline-block; width:40px !important; padding:0!important; overflow:hidden;}
  234. #head .menu>li.btnwap a>img{ width:100%; height:auto;}
  235. #head .language{ padding-left:20px;}
  236. #menuwap{ display:block;position:fixed;z-index:999;left:-100%;top: 0px;width: 100%;height: 100%; overflow:hidden;}
  237. #menuwap ul{ position:relative; width:100%; height:100%; margin:0px auto; padding:130px 0; background:rgba(68,68,68,1);}
  238. #menuwap ul.menu>li{ display:block; width:100%; text-align:left;}
  239. #menuwap ul.menu>li>a{ display:block; width:80%; height:45px; line-height:45px; color:#fff; margin:0px auto; text-align:left; border-bottom:1px solid rgba(255,255,255,.2);}
  240. #menuwap ul.menu>li>div{ display:none; padding:10px 0px; width:80%; margin:0px auto;}
  241. #menuwap ul.menu>li>div a{display:block;padding:5px;font-size:12px; color:#999;}
  242. #menuwap ul.pro{ padding:100px 0; background:#eee;}
  243. #menuwap ul.pro .back{ display:block!important; position:relative; background:#d82128; height:40px; overflow:hidden;}
  244. #menuwap ul.pro .back .btn{ position:absolute; z-index:1; left:0; top:0; width:16%; height:40px; line-height:40px; text-align:center; background:rgba(0,0,0,0.2);}
  245. #menuwap ul.pro .back .btn>img{ height:20px; width:auto;}
  246. #menuwap ul.pro .back .tit{ width:100%; line-height:40px; text-align:center; color:#fff; font-size:14px;}
  247. #menuwap ul.pro li{ display:none;}
  248. #menuwap ul.pro li>a{ display:block; width:90%; margin:0px auto; font-size:14px; padding:10px 0; text-align:left; border-bottom:1px solid rgba(0,0,0,.1);}
  249. }
  250. @media only screen and (max-width: 680px) {
  251. }
  252. @media only screen and (max-width: 420px) {
  253. #head{ height:70px;}
  254. #head .logo{ width:220px;}
  255. #head .logo a{ height:70px; line-height:70px;}
  256. #head .logo a img{top:0px;font-size:100px;}
  257. #head .menu, #head .menu>li.btnwap{ height:70px; line-height:70px;}
  258. #head .menu>li.btnwap a{ height:70px; line-height:70px;}
  259. #head .search{ display:none;}
  260. #head .language{ display:none;}
  261. #menuwap ul{padding:100px 0;}
  262. #menuwap ul.menu>li>div{top:70px;}
  263. #menuwap ul.pro{padding:70px 0;}
  264. }
  265. /* end*/
  266. /*
  267. banner
  268. -----------------------------------------------------------------*/
  269. #banner { width: 100%; height:auto; position: relative; z-index: 1; overflow: hidden; margin: 0px auto;}
  270. #banner .search{ display:none; position:absolute; z-index:6; left:50%; bottom:50px; width:1200px; margin-left:-600px;text-align:left;}
  271. #banner .search>.tips{ font-size:18px; color:rgba(255,255,255,.5); padding:15px 0;}
  272. #banner .search>form{ width:500px; height:50px; background:rgba(255,255,255,1);box-shadow:0 2px 5px rgba(0,0,0,.2);}
  273. #banner .search>form input[type="text"]{outline: medium;float:left;height:50px;line-height:50px;width:70%; padding:0 5%;border:none; font-family:微软雅黑; font-size:16px; background:none;color:#333;box-sizing:border-box;overflow:hidden;}
  274. #banner .search>form input::-webkit-input-placeholder, #search textarea::-webkit-input-placeholder { color:#ccc;}
  275. #banner .search>form button{float:right;width:20%;height:50px;border:none; opacity:.8;background:url(../image/go-black.png) no-repeat center center;background-size:auto 18px;;cursor:pointer;box-sizing:border-box;overflow:hidden;}
  276. #banner .search>form button:hover{ opacity:1;}
  277. @media only screen and (max-width: 1280px) {
  278. #banner .swiper-slide img{max-width:100%; height:auto;}
  279. }
  280. @media only screen and (max-width: 780px) {
  281. #banner .swiper-container{ padding-top:30px;}
  282. }
  283. /* end*/
  284. /*
  285. main
  286. -----------------------------------------------------------------*/
  287. #main{ width:100%; height:auto; margin:0px auto; background:#fff;}
  288. #main .title{ padding:30px 0; font-size:36px; color:#6fbef7; width:100%; margin:0px auto;}
  289. #main .wrap{ position:relative; width:86%; max-width:1280px; margin:0px auto; overflow:hidden;}
  290. #main .catalog{ width:100%; margin:0px auto;}
  291. #main .catalog .wrap{ padding:70px 0px;}
  292. #main .catalog .title{text-align:left;}
  293. #main .catalog .container{ width:46%; text-align:left;}
  294. #main .catalog .container p{ display:block;font-size:16px; color:#666; line-height:25px; margin-bottom:34px;}
  295. #main .catalog .img{ width:53%;}
  296. #main .catalog .img>img{ max-width:100%; height:auto; margin:0 auto;}
  297. #main .newpro{ width:100%; margin:0px auto; height:auto; background:#f3f3f3; overflow:hidden;}
  298. #main .newpro .title{ text-align:center;}
  299. #main .newpro .text{font-size:14px; color:#999; padding:0px; margin:0px auto;}
  300. #main .newpro .swiper-container {position:relative; width:1450px; height:auto; padding:2px 0; margin:0px auto;}
  301. #main .newpro .swiper-slide {text-align: center;background: #fff;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
  302. #main .newpro .swiper-slide a{ position:relative; display:block;width:100%; background:#fff; transition:all .35s;}
  303. #main .newpro .swiper-slide a .tips{position:absolute; z-index:5; right:0; top:0;}
  304. #main .newpro .swiper-slide a .tips>img{width:60px; height:auto;}
  305. #main .newpro .swiper-slide a .img{ position:relative; width:100%; margin:0px auto; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
  306. #main .newpro .swiper-slide a .img img{ width:100%; height:auto;}
  307. #main .newpro .swiper-slide a .img:after{ position:absolute; z-index:9; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0) url("http://www.gwsoft.com.cn/images/icon-zoom.png") no-repeat; background-position:50% -50%; content:''; transition:all .35s;}
  308. #main .newpro .swiper-slide a .name{ position:relative; padding:15px 6px; font-size:14px; text-align:center; transition:all .8s; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
  309. #main .newpro .swiper-slide a .name:after{ position:absolute; left:50%; top:0; width:50px; height:2px; margin-left:-25px; background:#ddd; content:''; transition:all .35s;}
  310. #main .newpro .swiper-slide a:hover .img:after{ background:rgba(0,0,0,.7) url("http://www.gwsoft.com.cn/images/icon-zoom.png") no-repeat;background-position:50% 50%;}
  311. #main .newpro .swiper-slide a:hover .name{ background:#d82128; color:#fff;}
  312. #main .newpro .swiper-slide a:hover .name:after{ width:100%; left:0; margin-left:0; background:#fff;}
  313. #main .newpro .swiper-slide a:hover{ box-shadow:0px 2px 5px rgba(0,0,0,.2);}
  314. #main .newpro .swiper-pagination{ position:relative;}
  315. #main .newpro .swiper-container-horizontal>.swiper-pagination-bullets, #main .newpro .swiper-pagination-custom, #main .newpro .swiper-pagination-fraction {bottom: 0!important;padding-top:30px;left: 0;width: 100%;}
  316. #main .newpro .swiper-pagination-bullet {width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; border:2px solid #eee; opacity: .2;}
  317. #main .newpro .swiper-pagination-bullet-active {opacity: 1;background: #d82128; border:2px solid #d82128;}
  318. #main .more{ display:inline-block !important; padding:10px 20px; width:111px !important; color:#fff; text-align:left; background:#4186cc;border-radius:3px;}
  319. #main .more:after{ position:absolute; top:14px; left:90px;font-family:iconfont;content: "\e6f8"; font-size:16px; color:#fff; transition:all .15s;}
  320. #main .more:hover{ background:#d82128;}
  321. #main .more:hover:after{ left:95px;}
  322. @media only screen and (max-width: 1460px){
  323. #main .wrap{ max-width:1140px;}
  324. }
  325. @media only screen and (max-width: 1280px) {
  326. #main{ width:100%;}
  327. #main .wrap{ max-width:1000px;}
  328. #main .catalog .img{ width:30%;}
  329. #main .catalog .img>img{ width:100%; height:auto;}
  330. #main .newpro .swiper-container {width:90%;}
  331. }
  332. @media only screen and (max-width: 680px) {
  333. #main .catalog .container p{ display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;overflow: hidden;}
  334. }
  335. @media only screen and (max-width: 420px) {
  336. #main .wrap{ width:80%;}
  337. #main .catalog .wrap{ padding:40px 0px; border-bottom:1px solid #eee;}
  338. #main .catalog .wrap:last-of-type{ border:0!important;}
  339. #main .catalog .title{text-align:center; font-size:18px;}
  340. #main .catalog .container{ float:none!important; width:100%; text-align:center;}
  341. #main .catalog .container p{ font-size:12px; line-height:20px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;}
  342. #main .catalog .img{ float:none!important; width:70%; margin:0 auto;}
  343. #main .newpro .swiper-slide a .tips>img{width:40px;}
  344. }
  345. /* end*/
  346. /*
  347. about
  348. -----------------------------------------------------------------*/
  349. #about{ position:relative; width:100%; margin:0px auto;}
  350. #about .profile{position:relative; margin:0px auto; width:100%; padding:0;}
  351. #about .profile .wrap{ position:absolute; z-index:99; left:50%; bottom:0; width:1200px; margin-left:-600px; transition:all .35s;}
  352. #about .profile .wrap .container{ float:right; width:50%; padding:3% 5%; text-align:left; background:rgba(255,255,255,.8); transition:all .35s;}
  353. #about .profile .wrap .container>.title{ position:relative; height:70px; line-height:70px; font-size:24px; color:#d82128;}
  354. #about .profile .wrap .container>.title:after{position:absolute; left:0; bottom:0; width:92px;height:3px; background:#d82128; content:'';}
  355. #about .profile .wrap .container>.text{ padding:20px 0; text-align:left; font-size:14px; color:#555; line-height:25px;}
  356. #about .profile .wrap .container>.text p{ margin-bottom:20px;}
  357. #about .profile .wrap .container>.more{ padding:10px 0; text-align:left;}
  358. #about .profile .wrap .container>.more a{ position:relative; display:inline-block; padding:0;}
  359. #about .profile .wrap .container>.more a>img{ position:relative; z-index:99; height:32px; width:auto; transition:all .35s;}
  360. #about .profile .wrap .container>.more a:hover img{ margin-left:10px;}
  361. #about .profile .img{ position:relative; width:100%; margin:0px auto;}
  362. #about .profile .img>img{ width:100%; height:auto; transition:all .35s;}
  363. #about .video{position: relative; width:100%; min-height: 600px; padding-top:50px; background: url('../image/video_bg.jpg') no-repeat center/cover;}
  364. #about .video .box{width: 90%; max-width: 1460px; margin:auto; text-align: left;}
  365. #about .video .box>.title{position:relative; height:70px; line-height:70px; font-size:24px; color:#d82128;}
  366. #about .video .box>.title:after{position:absolute; left:0; bottom:0; width:92px;height:3px; background:#d82128; content:'';}
  367. #about .video .con{margin:50px auto; text-align: center;}
  368. #about .history{ position:relative; width:100%; margin:0px auto; background:#e6e6e6 url("../image/history-bg.jpg") no-repeat; background-size:cover;}
  369. #about .history:after{ position:absolute; z-index:1; left:0; bottom:0; width:100%; height:20px;background:url("../image/history-timeaxis.png") repeat-x; background-position:center bottom; content:'';}
  370. #about .history .wrap{ position:relative; width:90%; max-width:1460px; padding-top:200px; margin:0px auto;}
  371. #about .history .wrap>.title{ position:relative; text-align:left; width:180px; height:160px; padding:40px 0 0 20px; font-size:24px; color:#fff; background:#d82128 url("../image/brand-title-bg.jpg") no-repeat; background-size:auto 100%;}
  372. #about .history .wrap>.title>a{ display:block; margin-top:10px;}
  373. #about .history .wrap>.container{ width:82%; padding-top:100px; overflow:hidden;}
  374. #about .history .wrap>.container .swiper-slide{position: relative; bottom:0; width:21%; height:430px; padding-left:2%; background: url(../image/history-timeaxis-red.png) no-repeat left top;background-position-y: 20px; text-align:left; transition:all .35s;}
  375. #about .history .wrap>.container .years{ font-size:40px; color:#d82128; transition:all .35s;}
  376. #about .history .wrap>.container .text{ padding:10px 0; font-size:14px; color:#666;line-height:18px; }
  377. #about .history .wrap>.container .img{ margin:0 auto; padding:10px 0; text-align:left;}
  378. #about .history .wrap>.container .img>img{ width:180px; height:auto;}
  379. #about .history .wrap>.container .ss_1{ top:120px;}
  380. #about .history .wrap>.container .ss_2{ top:80px;}
  381. #about .history .wrap>.container .ss_3{ top:50px;}
  382. #about .history .wrap>.container .ss_4{ top:0;}
  383. #about .history .wrap>.container .swiper-slide:hover .years{transform: translate(0,-20px); color:#333;}
  384. #about .history .wrap>.container .swiper-slide:hover{background: url(../image/history-timeaxis-black.png) no-repeat left top;background-position-y: 0px; }
  385. #about .honor{ position:relative; width:100%; margin:0px auto; background:#fff; padding:0;}
  386. #about .honor .wrap{ position:relative; width:90%; max-width:1460px; padding:50px 0; margin:0px auto;}
  387. #about .honor .wrap>.title{ position:relative; text-align:left; height:70px; line-height:70px; font-size:24px; color:#222; }
  388. #about .honor .wrap>.tag-year{ padding:20px 0;text-align:left;border-bottom:1px solid #ddd; overflow:hidden;}
  389. #about .honor .wrap>.tag-year .swiper-slide {text-align: center;font-size: 18px; background: #fff; width: 120px; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
  390. #about .honor .wrap>.tag-year .swiper-slide a{ display:block; padding:8px 20px; font-size:16px; font-weight:bold; text-align:center; color:#666;}
  391. #about .honor .wrap>.tag-year .swiper-slide .A{ background:#d82128; color:#fff;}
  392. #about .honor .wrap>.tag-con{ display:block; padding:30px 0;}
  393. #about .honor .wrap>.tag-con>ul{ display:none;}
  394. #about .honor .wrap>.tag-con>ul>li{ display:block; border-bottom:1px dotted #ddd; padding:20px; font-size:16px; color:#999; text-align:left;}
  395. #about .honor .wrap>.container>li{ display:block; border-bottom:1px dotted #ddd; padding:20px 0; font-size:16px; color:#999; text-align:left;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
  396. #about .honor .wrap>.container>li>span{ display:inline-block; font-size:18px; color:#777; margin-right:20px;}
  397. #about .patent{ position:relative; width:100%; margin:0px auto; background:#fff; padding:0;}
  398. #about .patent .wrap{ position:relative; width:90%; max-width:1460px; padding:50px 0; margin:0px auto;}
  399. #about .patent .wrap>.title{ position:relative; text-align:left; height:70px; line-height:70px; font-size:24px; color:#222; }
  400. #about .patent .swiper-container{ position:relative; width:100%; margin:0px auto; padding:50px 0;}
  401. #about .patent .button-prev{ position:absolute; z-index:9; right:50px; top:0; background:#ddd; border-radius:100%; width:35px; height:35px; overflow:hidden; cursor:pointer; transition:all .35s;}
  402. #about .patent .button-next{ position:absolute; z-index:9; right:0; top:0; background:#ddd; border-radius:100%; width:35px; height:35px; overflow:hidden; cursor:pointer; transition:all .35s;}
  403. #about .patent .button-prev img, #about .patent .button-next img{ width:100%; height:auto;}
  404. #about .patent .button-prev:hover img, #about .patent .button-next:hover img{ margin-top:-35px;}
  405. #about .patent .button-prev:hover, #about .patent .button-next:hover{ background:#d82128;}
  406. #about .patent .button-prev.swiper-button-disabled, #about .patent .button-next.swiper-button-disabled {opacity: .35;pointer-events: none;}
  407. #about .patent .swiper-slide { position:relative;text-align: center;background: #fff; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
  408. #about .patent .swiper-slide>a{ display:block; width:100%;}
  409. #about .patent .swiper-slide>a>.img{ position:relative; border:1px solid #ddd; padding:5%;}
  410. #about .patent .swiper-slide>a>.img:after{ position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6) url("../image/icon-zoom-magnifier.png") no-repeat; background-position:50% 40%; opacity:0; content:''; transition:all .35s;}
  411. #about .patent .swiper-slide>a>.img>img{ width:100%; height:auto;}
  412. #about .patent .swiper-slide>a>.name{ position:relative; width:90%; bottom:0; text-align:center; font-size:14px; color:#666; padding:5%; transition:all .35s;}
  413. #about .patent .swiper-slide>a:hover .img{ box-shadow:0 1px 3px rgba(0,0,0,.2);}
  414. #about .patent .swiper-slide>a:hover .name{ position:absolute; z-index:5; left:0; bottom:40%; color:#fff;}
  415. #about .patent .swiper-slide>a:hover .img:after{ opacity:1;}
  416. @media only screen and (max-width: 1280px) {
  417. #about .profile .wrap{ position:relative; z-index:99; left:auto; bottom:0; width:100%; margin-left:0;}
  418. #about .profile .wrap .container{ float:none; width:90%; padding:3% 5%; background:rgba(255,255,255,1);}
  419. #about .history .wrap{ padding-top:0!important;}
  420. #about .history .wrap>.title{ float:none!important; width:120px; height:120px; padding:20px;}
  421. #about .history .wrap>.container{ float:none!important; width:100%; padding-top:30px;}
  422. #about .history .wrap>.container .swiper-slide{width:26%; height:360px; padding-left:5%;}
  423. #about .history .wrap>.container .years{ font-size:36px;}
  424. #about .history .wrap>.container .img>img{ width:120px;}
  425. }
  426. @media only screen and (max-width: 420px) {
  427. #about .profile .wrap .container>.title{ height:50px; line-height:50px; font-size:16px; font-weight:bold;}
  428. #about .profile .wrap .container>.title:after{width:76px;}
  429. #about .video{padding-top:30px; height: auto; min-height: auto;}
  430. #about .video .box>.title{height:50px; line-height:50px; font-size:16px; font-weight:bold;}
  431. #about .video .box>.title:after{width:76px;}
  432. #about .video .con{margin:30px auto 50px auto; text-align: center;}
  433. #about .video .con video{width:100% !important;}
  434. #about .history .wrap{ width:100%;}
  435. #about .history .wrap>.title{ position:relative; width:100%; height:30px; font-size:16px; font-weight:bold; background-size:cover!important;}
  436. #about .history .wrap>.title>a{position:absolute; left:0; top:0; width:100%; height:100%; margin:0!important;}
  437. #about .history .wrap>.title>a img{ position:absolute; left:90px; top:22px; height:20px; width:auto; transform:rotate(90deg);}
  438. #about .history .wrap>.container{ width:90%; margin:0 auto; padding-top:20px;}
  439. #about .history .wrap>.container .swiper-slide{width:95%; height:300px; padding-left:5%;}
  440. #about .history .wrap>.container .ss_1{ top:80px;}
  441. #about .history .wrap>.container .ss_2{ top:60px;}
  442. #about .history .wrap>.container .ss_3{ top:20px;}
  443. #about .honor .wrap>.title{ height:50px; line-height:50px; font-size:16px; font-weight:bold;}
  444. #about .honor .wrap>.tag-year .swiper-slide {width: 100px;}
  445. #about .honor .wrap>.tag-year .swiper-slide a{ display:block; padding:8px 20px; font-size:14px;}
  446. #about .honor .wrap>.container>li{ font-size:14px;}
  447. #about .honor .wrap>.container>li>span{font-size:16px;}
  448. #about .patent .wrap>.title{height:50px; line-height:50px; font-size:16px; font-weight:bold;}
  449. #about .patent .button-prev{ right:30px; width:25px; height:25px;}
  450. #about .patent .button-next{ width:25px; height:25px;}
  451. #about .patent .button-prev:hover img, #about .patent .button-next:hover img{ margin-top:-25px;}
  452. }
  453. /* end*/
  454. /*
  455. profile
  456. -----------------------------------------------------------------*/
  457. #profile{ position:relative; width:100%; margin:0px auto;}
  458. #profile .wrap{ width:90%; max-width:1460px; margin:0px auto;}
  459. #profile .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  460. #profile .container{ margin:0px auto; padding:50px 0;}
  461. #profile .container>.img{ width:40%; text-align:left;}
  462. #profile .container>.img img{width:100%; height:auto;}
  463. #profile .container>.content{ width:55%; text-align:left; font-size:14px; line-height:25px; color:#666;}
  464. #profile .container>.content .first{ font-size:26px; color:#d82128; display:block; margin-bottom:20px;}
  465. #profile .container>.content>p{ margin-bottom:20px;}
  466. @media only screen and (max-width: 1280px) {
  467. #profile .container{ padding:30px 0;}
  468. #profile .container>.img{ width:100%; float:none!important;}
  469. #profile .container>.content{ width:100%; float:none!important; padding-top:30px;}
  470. }
  471. @media only screen and (max-width: 420px) {
  472. #profile .wrap>.title{ padding:0!important; font-size:16px; font-weight:bold;}
  473. #profile .container>.content .first{ font-size:20px;}
  474. }
  475. /* end*/
  476. /*
  477. brand
  478. -----------------------------------------------------------------*/
  479. #brand{ position:relative; width:100%; margin:0px auto;}
  480. #brand .wrap{ width:90%; max-width:1460px; margin:0px auto;}
  481. #brand .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  482. #brand .container{ position:relative; width:100%; max-width:1200px; margin:50px auto; padding:0;}
  483. #brand .container:after{position:absolute; z-index:1; top:0; left:50%; margin-left:-2px; width:4px; height:100%; background:#eee; content:'';}
  484. #brand .container>li{ position:relative; display:block; width:36%; padding:50px; margin:150px 0; background:#fff; border:1px solid #ddd;}
  485. #brand .container>li:after{position:absolute; z-index:1; top:10px; width:15px;height:19px; background:url("http://www.gwsoft.com.cn/images/brand-arrow.png") no-repeat; content:'';}
  486. #brand .container>li:first-of-type{ margin-top:0!important;}
  487. #brand .container>li.fl-left{ text-align:right;}
  488. #brand .container>li.fl-left:after{right:-14px;transform:rotate(180deg);}
  489. #brand .container>li.fl-right{ text-align:left;}
  490. #brand .container>li.fl-right:after{left:-14px;}
  491. #brand .container>li .years{ font-size:30px; color:#d82128; padding-bottom:20px;}
  492. #brand .container>li .text{ font-size:14px; color:#666; line-height:24px;}
  493. #brand .container>li .img{ display:block; margin:20px 0;}
  494. #brand .container>li .img>img{ width:260px; height:auto;}
  495. #brand .container>li .node{ position:absolute; z-index:2; top:10px; background:#ccc; border:4px solid #fff; border-radius:100%; width:12px; height:12px; transition:all .35s;}
  496. #brand .container>li.fl-left .node{right:-14.6%;}
  497. #brand .container>li.fl-right .node{left:-14.3%;}
  498. #brand .container>li:hover .node{ background:#d82128;}
  499. @media only screen and (max-width: 1280px) {
  500. #brand .container{ padding:30px 0; width:100%;}
  501. #brand .container:after{left:0; margin-left:0!important;}
  502. #brand .container>li{ width:70%; margin-left:10%;}
  503. #brand .container>li.fl-left{ float:none!important; text-align:left!important;}
  504. #brand .container>li.fl-left:after{left:-14px;right:auto;transform:rotate(0deg)!important;}
  505. #brand .container>li.fl-right{ float:none!important;}
  506. #brand .container>li.fl-left .node{left:-13.6%!important; right:auto;}
  507. #brand .container>li.fl-right .node{left:-13.6%!important;}
  508. }
  509. @media only screen and (max-width: 420px) {
  510. #brand .wrap>.title{ padding:0!important; font-size:16px; font-weight:bold;}
  511. #brand .container>li{ width:70%; padding:30px; margin:100px 0 100px 10%; }
  512. #brand .container>li .img>img{ width:100%; height:auto;}
  513. }
  514. /* end*/
  515. /*
  516. news
  517. -----------------------------------------------------------------*/
  518. #news{ position:relative; width:100%; margin:0px auto; background:#fff;}
  519. #news .company-news{ width:90%;max-width:1460px; margin:0px auto 100px auto;}
  520. #news .company-news>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  521. #news .company-news>.title .more{ float:right; display:block; color:#fff; font-size:25px; transition:all .35s;}
  522. #news .company-news>.title .more:hover{ color:#d82128;}
  523. #news .company-news .hot{ position:relative; margin:20px auto;}
  524. #news .company-news .hot:after{position:absolute; z-index:9; right:0; top:0; width:100%; height:99.6%; border:1px solid #ddd; border-left:0 !important; content:'';}
  525. #news .company-news .hot>.img{ position:relative; z-index:99; width:40%; height:auto; text-align:left; overflow:hidden;}
  526. #news .company-news .hot>.img a:after{position:absolute; z-index:3; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0) url("http://www.gwsoft.com.cn/images/icon-zoom-arrow.png") no-repeat; background-position:-50% 50%; content:''; transition:all .35s;}
  527. #news .company-news .hot>.img .clicks{ position:absolute; z-index:5; right:0; bottom:0; width:80px; height:60px; padding-top:15px; background:rgba(216,33,40,.8); text-align:center; font-size:14px; font-family:"Arial"; color:#fff; transition:all .35s;}
  528. #news .company-news .hot>.img .clicks>img{ display:block; width:26px; height:auto; margin:0px auto;}
  529. #news .company-news .hot>.img img{ width:100%; height:auto;}
  530. #news .company-news .hot>.img a:hover .clicks{ display:none;}
  531. #news .company-news .hot>.img a:hover:after{ height:100%; background:rgba(0,0,0,.7) url("http://www.gwsoft.com.cn/images/icon-zoom-arrow.png") no-repeat; background-position:50% 50%;}
  532. #news .company-news .hot>.container{ position:relative; z-index:99; width:50%; padding:5%; text-align:left;}
  533. #news .company-news .hot>.container .name{ display:block; padding:20px 0; font-size:24px; color:#fff; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
  534. #news .company-news .hot>.container .text{ font-size:16px; line-height:32px; max-height:320px; color:#888;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;}
  535. #news .company-news .hot>.container .time{ display:block; padding:20px 0; font-size:14px; font-family:"Arial"; color:#ccc;}
  536. #news .company-news .hot>.container .time>img{ opacity:.2; height:18px; width:auto;}
  537. #news .company-news .hot>.container a:hover .name{ color:#d82128;}
  538. #news .company-news .list{ margin:0px auto; padding:30px 0;}
  539. #news .company-news .list>a{ display:block;float:left; width:29.1%;margin:2%;text-align:left; border:1px solid #ddd; margin-right:3%; transition:all .35s;}
  540. #news .company-news .list>a:nth-child(3n){ margin-right:0!important;}
  541. #news .company-news .list>a .name{ display:block; padding:20px 0; font-size:18px; color:#333; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
  542. #news .company-news .list>a .text{ font-size:14px; line-height:25px; max-height:80px; color:#888;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;overflow: hidden;}
  543. #news .company-news .list>a .time{ display:block; font-size:14px; font-family:"Arial"; color:#ccc;}
  544. #news .company-news .list>a .time>img{ width:100%;}
  545. #news .company-news .list>a:hover{ background:#d82128; border:1px solid #d82128;}
  546. #news .company-news .list>a:hover .name{ color:rgba(255,255,255,1);}
  547. #news .company-news .list>a:hover .text{ color:rgba(255,255,255,.8);}
  548. #news .company-news .list>a:hover .time{ color:rgba(0,0,0,.2);}
  549. #news .product-news{position:relative; width:100%; margin:0px auto; padding:0 0 150px 0; background:url("../image/product-news-bg.jpg") no-repeat; background-position: top center; background-size: cover;}
  550. #news .product-news .title{ position:relative; z-index:99; width:100%; margin:0 auto;}
  551. #news .product-news .title>.tit{ width:100%; height:150px; padding-top:30px; font-size:25px; font-weight:bold; color:#fff; background:rgba(216,33,40,0); text-align:center; margin:0 auto;}
  552. #news .product-news .title>.tit>img{ display:block; margin:10px auto;}
  553. #news .product-news .title>.tips{ width:500px; padding:50px; line-height:25px; text-align:center; color:#999; font-size:14px; margin:0px auto;}
  554. #news .product-news .list{ width:90%; max-width:1460px; margin:0px auto; padding:30px 0;}
  555. #news .product-news .list>a{ position:relative; display:block;float:left; width:17.6%; padding:0; text-align:left; border-radius:0 0 30px 0; margin-right:3%; margin-bottom:3%; background:#fff; overflow:hidden; transition:all .35s;}
  556. #news .product-news .list>a:after{ position:absolute; z-index:6; left:0; top:0; width:100%; height:100%;border-radius:0 0 30px 0; content:'';transition:all .35s;}
  557. #news .product-news .list>a:nth-child(5n){ margin-right:0!important;}
  558. #news .product-news .list>a .name{ display:block; width:80%; margin:0px auto; padding:20px 0; font-size:18px; color:#333; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
  559. #news .product-news .list>a .img{ position:relative; margin:0px auto;}
  560. #news .product-news .list>a .img:after{position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0); content:''; transition:all .35s;}
  561. #news .product-news .list>a .img>img{ width:100%; height:auto;}
  562. #news .product-news .list>a .text{ width:80%; margin:0px auto; font-size:14px; line-height:25px; max-height:80px; color:#888;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;overflow: hidden;}
  563. #news .product-news .list>a .time{ width:80%; margin:0px auto; display:block; padding:20px 0; font-size:14px; font-family:"Arial"; color:#ccc;}
  564. #news .product-news .list>a .time>img{ opacity:.2; height:16px; width:auto;}
  565. #news .product-news .list>a:hover .name{ color:#d82128;}
  566. #news .product-news .list>a:hover .img:after{ background:rgba(255,255,255,.3);}
  567. #news .product-news .list>a:hover{transform: translateY(-10px);}
  568. #news .product-news .list>a:hover:after{ box-shadow: inset 0px 0px 0px 3px rgba(216,33,40,1), 0px 1px 2px rgba(0,0,0,0.1);}
  569. #news .product-news .more{ padding:20px 0; text-align:center;}
  570. #news .product-news .more>a{ display:inline-block; background:#d82128; border-radius:5px; color:#fff; font-size:16px; padding:10px 35px; transition:all .35s;}
  571. #news .product-news .more>a:hover{ opacity:.8;}
  572. @media only screen and (max-width: 1280px) {
  573. #news .company-news .hot>.container .name{ padding:10px 0; font-size:20px;}
  574. #news .company-news .hot>.container .text{ font-size:16px; line-height:25px; max-height:100px; -webkit-line-clamp:2;}
  575. #news .company-news .hot>.container .time{ padding:10px 0;}
  576. #news .company-news .list>a{float:none!important; width:95.6%; margin-bottom:3%; margin-right:0 !important;}
  577. #news .company-news .list>a:nth-child(3n){ margin-right:0!important;}
  578. #news .product-news .list>a{ width:31.2%;}
  579. #news .product-news .list>a:nth-child(3n){ margin-right:0!important;}
  580. #news .product-news .list>a:nth-of-type(4), #news .product-news .list>a:nth-of-type(5){ display:none!important;}
  581. }
  582. @media only screen and (max-width: 420px) {
  583. #news .company-news{ margin:0px auto 50px auto;}
  584. #news .company-news>.title{ padding:20px 0!important; font-size:16px; font-weight:bold;}
  585. #news .company-news>.title .more{ font-weight:normal;}
  586. #news .company-news .hot:after{ display:none; height:100%!important; border:0 !important;}
  587. #news .company-news .hot>.img{ width:100%!important; float:none!important; margin:0px auto;}
  588. #news .company-news .hot>.container{ width:89.6%; float:none!important; border:1px solid #ddd; border-top:0!important; margin:0px auto;}
  589. #news .company-news .hot>.container .name{font-size:16px;}
  590. #news .company-news .hot>.container .text{ font-size:14px; line-height:20px;}
  591. #news .company-news .hot>.container .time{ font-size:12px;}
  592. #news .company-news .list{ padding:0px!important;}
  593. #news .company-news .list>a .name{ padding:10px; font-size:16px;}
  594. #news .company-news .list>a .text{ padding:0 10px;font-size:12px; line-height:20px; max-height:80px; -webkit-line-clamp:2;}
  595. #news .company-news .list>a .time{ padding:10px; font-size:12px;}
  596. #news .company-news .list>a .time>img{;}
  597. #news .product-news .title>.tips{ width:80%; padding:20px 0 0 0; font-size:12px; line-height:20px;}
  598. #news .product-news .list>a{ width:100%;float:none!important;margin-right:0!important; margin-bottom:5%;}
  599. #news .product-news .list>a .img{ float:left; width:40%;}
  600. #news .product-news .list>a .container{ float:right; width:60%;}
  601. #news .product-news .list>a .name{ padding:20px 0 0 0!important; font-size:16px;}
  602. #news .product-news .list>a .text{ display:none;}
  603. #news .product-news .list>a .time{ padding:5px 0 !important; font-size:12px;}
  604. #news .product-news .list>a .time>img{ height:14px;}
  605. }
  606. /* end*/
  607. /*
  608. news company
  609. -----------------------------------------------------------------*/
  610. #news-company{ position:relative; width:100%; margin:0px auto;}
  611. #news-company .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  612. #news-company .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  613. #news-company .container{ margin:0px auto; padding:50px 0 150px 0;}
  614. #news-company .container>li{ display:block; background:#fff; border:1px solid #ddd; padding:2%; margin-bottom:3%; transition:all .35s;}
  615. #news-company .container>li>a{ display:block;}
  616. #news-company .container .img{ position:relative; width:35%; text-align:left;}
  617. #news-company .container .img>img{ width:100%; height:auto; transition:all .35s;}
  618. #news-company .container .img:after{position:absolute; z-index:1; right:0; top:20%; width:0;height:0;border-top: 10px solid transparent;border-right: 12px solid rgba(255,255,255,1); border-bottom: 10px solid transparent; content:'';}
  619. #news-company .container .describe{ width:62%; text-align:left;}
  620. #news-company .container .describe>.name{ display:block; padding:15px 0; font-size:24px; font-weight:normal; color:#333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
  621. #news-company .container .describe>.text{ padding:20px 0; font-size:14px; color:#888; line-height:25px;}
  622. #news-company .container .describe>.time{ color:#d82128; font-size:14px; font-family:"Arial";}
  623. #news-company .container .describe>.time>img{ height:18px; width:auto; margin-right:5px;}
  624. #news-company .container>li>a:hover .img>img{ opacity:.8;}
  625. #news-company .container>li>a:hover .name{ color:#d82128;}
  626. #news-company .container>li:hover{transform:translate(0,-5px); box-shadow:0 2px 5px rgba(0,0,0,.1);}
  627. #news-company .more{ padding:0px 0 100px 0; text-align:center;}
  628. @media only screen and (max-width: 1280px) {
  629. #news-company .container{ padding:30px 0;}
  630. #news-company .container .describe>.name{ font-size:20px;}
  631. #news-company .container .describe>.text{ padding:0; height:50px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
  632. #news-company .container .describe>.time{ padding:10px 0;}
  633. }
  634. @media only screen and (max-width: 420px) {
  635. #news-company .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  636. #news-company .container>li{ padding:3%; margin-bottom:5%;}
  637. #news-company .container .img{ width:100%!important; float:none!important;}
  638. #news-company .container .img:after{display:none;}
  639. #news-company .container .describe{ width:100%!important; float:none!important;}
  640. #news-company .container .describe>.name{ font-size:16px; padding:10px 5px;}
  641. #news-company .container .describe>.text{ padding:0 5px; height:40px; font-size:12px; line-height:20px;}
  642. #news-company .container .describe>.time{ padding:5px; font-size:12px;}
  643. #news-company .container .describe>.time>img{ height:14px;}
  644. }
  645. /* end*/
  646. /*
  647. news product
  648. -----------------------------------------------------------------*/
  649. #news-product{ position:relative; width:100%; margin:0px auto;}
  650. #news-product .wrap{ width:90%; max-width:1460px; margin:0px auto;}
  651. #news-product .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  652. #news-product .container{ margin:0px auto; padding:50px 0 150px 0;}
  653. #news-product .container>li{ display:block; width:27%; float:left; background:#fff; border:1px solid #ddd; padding:2%; margin-right:3.2%; margin-bottom:3%;}
  654. #news-product .container>li:nth-of-type(3n){ margin-right:0 !important;}
  655. #news-product .container>li>a{ display:block;}
  656. #news-product .container .img{ position:relative; float:none!important; width:100%; max-height:205px; text-align:left; overflow:hidden;}
  657. #news-product .container .img>img{ width:100%; height:auto; transition:all .35s;}
  658. #news-product .container .img:after{position:absolute; z-index:1; bottom:0; left:10%; width:0;height:0;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 12px solid rgba(255,255,255,1); content:'';}
  659. #news-product .container .describe{ width:100%; float:none!important; text-align:left;}
  660. #news-product .container .describe>.name{ display:block; padding:15px 0; font-size:24px; font-weight:normal; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; color:#333;}
  661. #news-product .container .describe>.text{ padding:10px 0; height:60px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; font-size:14px; color:#888; line-height:25px;}
  662. #news-product .container .describe>.time{ padding:20px 0; color:#d82128; font-size:14px; font-family:"Arial";}
  663. #news-product .container .describe>.time>img{ height:18px; width:auto; margin-right:5px;}
  664. #news-product .container>li>a:hover .img>img{}
  665. #news-product .container>li>a:hover .name{ color:#d82128;}
  666. #news-product .more{ padding:0px 0 100px 0; text-align:center;}
  667. @media only screen and (max-width: 1280px) {
  668. #news-product .container{ padding:30px 0;}
  669. #news-product .container>li{ width:44%; margin-right:3.4%;}
  670. #news-product .container>li:nth-of-type(3n){ margin-right:3.4%!important;}
  671. #news-product .container>li:nth-of-type(2n){ margin-right:0 !important;}
  672. #news-product .container .describe>.name{ padding:10px 0; font-size:20px;}
  673. #news-product .container .describe>.text{ height:40px; -webkit-line-clamp: 2;}
  674. }
  675. @media only screen and (max-width: 420px) {
  676. #news-product .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  677. #news-product .container>li{ width:93.6%; float:none!important; border:1px solid #ddd; padding:3%; margin-bottom:5%; margin-right:0!important;}
  678. #news-product .container .describe>.name{ font-size:16px; padding:10px 5px;}
  679. #news-product .container .describe>.text{ padding:0 5px; height:40px; font-size:12px; line-height:20px;}
  680. #news-product .container .describe>.time{ padding:5px; font-size:12px;}
  681. #news-product .container .describe>.time>img{ height:14px;}
  682. }
  683. /* end*/
  684. /*
  685. news view
  686. -----------------------------------------------------------------*/
  687. #news-view{ position:relative; width:100%; margin:-22px auto;}
  688. #news-view .wrap{ margin: 0px auto; }
  689. #news-view .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  690. #news-view .container{ margin:0px auto;}
  691. #news-view .container .content{ width:70%; padding-right:3%; text-align:left; border-right:1px solid #ddd;}
  692. #news-view .container .content>.time{ font-size:12px; color:#999;}
  693. #news-view .container .content>.text{ padding:30px 0; font-size:14px; line-height:25px; color:#666; min-height:400px;}
  694. #news-view .container .content>.text img{ max-width:100%; height:auto;}
  695. #news-view .container .content>.text table{ width:100%; border-left:1px solid #ddd; border-top:1px solid #ddd;}
  696. #news-view .container .content>.text table>td{ border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:5px;}
  697. #news-view .container .related{ width:25%; text-align:left;}
  698. #news-view .container .related>.title{ font-size:14px; font-weight:bold; padding:10px 0;}
  699. #news-view .container .related>.title>img{ height:30px; width:auto; margin-right:6px;}
  700. #news-view .container .related>.list{ padding:10px 0; text-align:left;}
  701. #news-view .container .related>.list a{ position:relative; display:block; padding:5px 0px 5px 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
  702. #news-view .container .related>.list a:after{ position:absolute; z-index:2; left:0; top:50%; width:4px; height:4px; margin-top:-2px; background:#ddd; content:'';}
  703. #news-view .container .related>.more{ padding:5px 10px;}
  704. #news-view .container .related>.more a{ display:inline-block; color:#d82128;}
  705. #news-view .url{ position:relative; width:75%; padding:50px 25% 50px 0; text-align:center; margin:0px auto 50px auto; overflow:hidden;}
  706. #news-view .url:after{ position:absolute; z-index:1; left:0; top:0; width:73%; height:100%; border-right:1px solid #ddd; content:'';}
  707. #news-view .url a{ position:relative; z-index:99; display:inline-block; margin-right:30px; color:#d82128; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
  708. #news-view .url a>img{ height:25px; width:auto; margin-right:5px;}
  709. #news-view .url a:hover{ text-decoration:underline;}
  710. @media only screen and (max-width: 1280px) {
  711. #news-view .container .content{ width:100%; float:none!important; padding-right:0!important; border-right:0!important;}
  712. #news-view .container .related{ width:90%; float:none!important; border-right:0!important; background:#eee; padding:5%;}
  713. #news-view .container .related>.title{ padding-top:20px;}
  714. #news-view .url{ text-align:left;}
  715. #news-view .url:after{ display:none;}
  716. #news-view .url a{display:block; padding:5px 0;}
  717. }
  718. @media only screen and (max-width: 420px) {
  719. #news-view .wrap>.title{ padding:0 0 10px 0!important; font-size:16px; font-weight:bold;}
  720. }
  721. /* end*/
  722. /*
  723. path
  724. -----------------------------------------------------------------*/
  725. #path{ width:100%;margin:0px auto;background:#fff; text-align:left; color:#666;font-size:14px;}
  726. #path>.wrap{ width:90%; max-width:1460px; margin:0 auto; padding-top:30px;}
  727. #path a{ display:inline-block; color:#666;}
  728. #path a>img{ height:18px; width:auto; margin-right:5px;}
  729. #path a:hover, #path .A{ color:#d82128;}
  730. @media only screen and (max-width: 420px){
  731. #path{ font-size:12px;}
  732. #path>span{ display:none!important;}
  733. }
  734. /* end*/
  735. /*
  736. prosearch
  737. -----------------------------------------------------------------*/
  738. #prosearch{ background:#eee; margin:0px auto; padding:20px 0;}
  739. #prosearch>form{ width:500px; height:40px; background:rgba(255,255,255,1);border:1px solid #ddd; margin:0px auto;}
  740. #prosearch>form input[type="text"]{outline: medium;float:left;height:40px;line-height:40px;width:70%; padding:0 5%;border:none; font-family:微软雅黑; font-size:16px; background:none;color:#333;box-sizing:border-box;overflow:hidden;}
  741. #prosearch>form input::-webkit-input-placeholder, #search textarea::-webkit-input-placeholder { color:#ccc;}
  742. #prosearch>form button{float:right;width:20%;height:40px;border:none; opacity:.8;background:url(../image/go-black.png) no-repeat center center;background-size:auto 18px;;cursor:pointer;box-sizing:border-box;overflow:hidden;}
  743. #prosearch>form button:hover{ opacity:1;}
  744. @media only screen and (max-width: 1280px) {
  745. #prosearch>form{ width:80%;}
  746. }
  747. @media only screen and (max-width: 420px) {
  748. #prosearch>form{ width:90%;}
  749. }
  750. /* end*/
  751. /*
  752. products
  753. -----------------------------------------------------------------*/
  754. #products{ width:100%; margin:0px auto; padding:50px 0; background:#fff;}
  755. #products .wrap{position:relative; width:90%; max-width:1460px; margin:0px auto;}
  756. #products .conLeft{ width:20%; max-width:280px;}
  757. #products .conRight{ width:78%;}
  758. #products .prolist{ width:100%;}
  759. #products .prolist>ul{ display:block; width:100%; margin:0px auto; background:url("http://www.gwsoft.com.cn/images/prolist-bg.png") repeat-y; background-position:top center;}
  760. #products .prolist>ul>li{ display:block; text-align:left;}
  761. #products .prolist>ul>li:last-of-type>a{border-bottom:1px solid #ddd;}
  762. #products .prolist>ul>li>a{ position:relative; display:block; border-top:1px solid #ddd; margin-top:-1px; padding-left:28%; width:72%; height:50px; line-height:50px; font-size:16px;}
  763. #products .prolist>ul>li>a.on{background: #366cb3 url(../image/icon-minus.png) no-repeat !important;
  764. background-position: 95% 50% !important;
  765. background-size: 18px auto !important;
  766. border-top: 1px solid #366cb3
  767. border-right: 1px solid #366cb3
  768. color: #fff!important;
  769. color:#fff}
  770. #products .prolist>ul>li>a>.icon{ position:absolute; z-index:2; left:5%; top:50%; margin-top:-18px; display:block; width:36px; height:36px; overflow:hidden;}
  771. #products .prolist>ul>li>a:after{ position:absolute; left:20%; top:50%; width:1px; height:20px; margin-top:-10px; background:#ccc; content:'';}
  772. #products .prolist>ul>li>a>.icon>img{position:absolute; z-index:1; top:0; left:0; width:100%; height:auto;}
  773. #products .prolist>ul>li>.A .icon>img{ top:-36px;}
  774. #products .prolist>ul>li>.A{ background:#d82128 url("../image/icon-minus.png") no-repeat !important; background-position:95% 50% !important; background-size:18px auto !important; border-top:1px solid #d82128; border-right:1px solid #d82128; color:#fff!important;}
  775. #products .prolist>ul>li:hover>a{ color:#d82128;}
  776. #products .prolist>ul>li>ul{ display:block; background:#eee url("http://www.gwsoft.com.cn/images/prolist-bg.png") repeat-y; background-position:top center; padding:0; margin:0px auto;}
  777. #products .prolist>ul>li>ul>li{ display:block; font-size:14px; text-align:left;}
  778. #products .prolist>ul>li>ul>li>a{ display:block; padding:10px 0; padding-left:8%; width:92%; transition:all .35s;}
  779. #products .prolist>ul>li>ul>li a:hover{ font-weight:bold; color:#d82128;}
  780. #products .prolist>ul>li>ul>li .on{background: url("../image/icon-plus.png") no-repeat; background-position:95% 50%; background-size:16px auto;}
  781. #products .prolist>ul>li>ul>li .A{background:#ff585e url("../image/icon-minus.png") no-repeat !important; background-position:95% 50% !important; background-size:16px auto !important; border-top:1px solid #ff585e; border-right:1px solid #ff585e; color:#fff!important;}
  782. #products .prolist>ul>li>ul>li ul{ background:#f7f7f7 url("http://www.gwsoft.com.cn/images/prolist-bg.png") repeat-y; background-position:top center; padding:0; margin:0px auto;}
  783. #products .prolist>ul>li>ul>li ul>li{ display:block; font-size:14px; text-align:left;}
  784. #products .prolist>ul>li>ul>li ul>li>a{ display:block; padding:10px 0; padding-left:8%; width:92%; transition:all .35s;}
  785. #products .prolist>ul>li>ul>li>ul>li .A{background:#ffa7aa url("../image/icon-minus.png") no-repeat !important; background-position:95% 50% !important; background-size:16px auto !important; border-top:1px solid #ffa7aa; border-right:1px solid #ffa7aa; color:#fff!important;}
  786. #products .prolist>ul>li .sA{ color:#d82128; font-weight:bold;}
  787. #products .procall{ margin:30px auto; border:1px solid #ddd;}
  788. #products .procall>.text{ padding:30px 20px; text-align:left;}
  789. #products .procall>.text>.title{font-size:14px; color:#666;}
  790. #products .procall>.text>.title>img{ height:20px; width:auto; opacity:.4;}
  791. #products .procall>.text>.tel{ padding:8px 0; font-size:24px; font-weight:bold; color:#d82128;}
  792. #products .procall>.text>.tips{font-size:12px; color:#999;}
  793. #products .procall>.online{ border-top:1px solid #ddd;overflow:hidden;}
  794. #products .procall>.online>a{ position:relative; display:block; width:50%; float:left; padding:20px 0; text-align:center; background:#f7f7f7; transition:all .35s;}
  795. #products .procall>.online>a:first-child:after{ position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; border-right:1px solid #ddd; content:'';}
  796. #products .procall>.online>a>span{ display:block; position:relative; width:45px; height:45px; overflow:hidden; margin:0px auto 5px auto;}
  797. #products .procall>.online>a>span>img{position:absolute; z-index:2; left:0; top:0; width:100%; height:auto; transition:all .35s;}
  798. #products .procall>.online>a:hover{ background:#d82128; color:#fff;}
  799. #products .procall>.online>a:hover span>img{ top:-45px;}
  800. #products .product{ margin:0px auto;}
  801. #products .product>li{ display:block; float:left; width:26.8%; border:1px solid #ddd; margin-top:30px; margin-left:30px;}
  802. #products .product>li>a{ display:block; position:relative;}
  803. #products .product>li>a:after{position:absolute; z-index:8; left:0; top:0; width:100%; height:100%; background:rgba(216,33,40,0); content:''; transition:all .35s;}
  804. #products .product>li .tips{position:absolute; z-index:6; right:0; top:0;}
  805. #products .product>li .tips>img{ width:60px; height:auto;}
  806. #products .product>li .view{position:absolute; z-index:9; left:0; top:0; width:100%; opacity:0; padding-top:40%; text-align:center; font-size:14px; color:rgba(255,255,255,1); transition:all .35s;}
  807. #products .product>li .view .icon{ position:relative; display:block; margin:0px auto 10px auto; width:58px; height:58px; border:1px solid rgba(255,255,255,1); border-radius:100%; text-align:center; overflow:hidden;}
  808. #products .product>li .view .icon>img{ position:absolute; left:-100%; top:0; width:100%; height:auto; margin:0px auto; transition:all .35s;}
  809. #products .product>li .img{ display:block; width:100%; text-align:center; overflow:hidden;}
  810. #products .product>li .img>img{ width:100%; height:auto; margin:0px auto;}
  811. #products .product>li .name{ font-size:16px; text-align:center; padding:20px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  812. #products .product>li>a:hover:after{ background:rgba(216,33,40,.8);}
  813. #products .product>li>a:hover .view{ opacity:1;}
  814. #products .product>li>a:hover .view .icon>img{ left:0;}
  815. #products .wrap>.clear{ padding-bottom:50px;}
  816. @media only screen and (max-width: 1280px) {
  817. #products{ padding:20px 0;}
  818. #products .conLeft{ display:none;}
  819. #products .conRight{ width:100% !important;}
  820. #products .product>li{ width:49.8%;}
  821. #products .product>li .img>img{ width:80%;}
  822. }
  823. @media only screen and (max-width: 420px) {
  824. #products .product>li{ width:84.8%;}
  825. #products .product>li .name{ font-size:14px; padding:10px 5px;}
  826. }
  827. /* end*/
  828. /*
  829. product-view
  830. -----------------------------------------------------------------*/
  831. #product-view{ width:100%; margin:0px auto; background:#fff;}
  832. #product-view>.wrap{ width:90%; max-width:1460px; margin:0 auto; padding:50px 0 100px 0;}
  833. #product-view .tags{ margin:0px auto; padding:50px 0 100px 0;}
  834. #product-view .tags .tags_title{ padding:20px; text-align:center;}
  835. #product-view .tags .tags_title a{ display:inline-block; width:100px; height:100px; text-align:center; margin:0px 10px; border:3px solid #ddd; border-radius:8px; font-size:14px; background:#fff; color:#666; transition:all .35s;}
  836. #product-view .tags .tags_title a>span{ position:relative; display:block; width:40px; height:40px; margin:15px auto 10px auto; overflow:hidden;}
  837. #product-view .tags .tags_title a>span>img{ position:absolute; z-index:1; left:0; top:0; width:100%;height:auto;}
  838. #product-view .tags .tags_title .A{ color:#d82128;border:3px solid #d82128;}
  839. #product-view .tags .tags_title .A>span>img{ top:-40px;}
  840. #product-view .tags .tags_content{ display:none; text-align:left; line-height:25px;color:#676767; border-top:1px solid #ddd; padding-top:50px; font-size:14px;}
  841. #product-view .tags .tags_content iframe{ width:100%; height:700px; margin:0px auto;}
  842. #product-view .tags .tags_content table{ border-left:1px solid #fff !important; border-right:1px solid #fff !important; width:100%;}
  843. #product-view .tags .tags_content table tr{ transition:all .1s;}
  844. #product-view .tags .tags_content table tr:first-child{ background:#666 !important; font-weight:bold; font-size:15px; color:#fff !important;}
  845. #product-view .tags .tags_content table tr:first-child td{border-right:1px solid rgba(255,255,255,.1) !important;padding:15px 20px !important;}
  846. #product-view .tags .tags_content table td{ border-right:1px solid #ddd; border-bottom:1px solid #ddd; text-align:left; padding:10px 20px;}
  847. #product-view .tags .tags_content table td:last-of-type{ border-right:1px solid #fff !important;}
  848. #product-view .tags .tags_content table tr:hover{ background:#d82128; color:#fff;}
  849. #product-view .tags .tags_content a{ display:inline-block; text-align:left; width:30%; transition:all .35s;}
  850. #product-view .tags .tags_content a>img{ height:50px; width:auto; margin-right:15px;}
  851. #product-view .tags .tags_content a:hover{ text-decoration:underline;}
  852. #product-view .tags .tags_content a.pdf{ font-size:16px;}
  853. #product-view .tags .tags_content a.down_3d{ display:inline-block; background:#d82128;border-radius:5px; font-size:16px; padding:5px 0; line-height:45px; color:#fff; margin-top:20px; width:180px;}
  854. #product-view .tags .tags_content a.down_3d>span{ position:relative; display:inline-block; float:left; margin-left:25px; width:45px; height:45px; overflow:hidden;}
  855. #product-view .tags .tags_content a.down_3d>span>img{ position:absolute; z-index:1; left:0; top:-45px; width:100%; height:auto;}
  856. #product-view .tags .tags_content a.down_3d:hover{ background:#ff9900; text-decoration:none;}
  857. #product-view .tags .tags_content .tips{ display:inline-block; padding:10px 20px; line-height:20px; text-align:left; color:#aaa; font-size:14px;}
  858. #product-view .name{ font-size:32px; color:#000000; padding:20px 0; text-align:left;}
  859. #product-view .name>img{ margin-right:10px;}
  860. #product-view .container{position:relative; height:600px; border:1px solid #ddd; overflow:hidden;}
  861. #product-view .container .tagcon{ display:none; width:80%; height:600px; overflow:hidden; text-align:center;}
  862. #product-view .container .tagcon iframe{ display:block; width:100%; height:500px; margin:0; padding:0;}
  863. #product-view .container .tagcon .down_3d{ position:relative; margin:0px auto; padding:0px 30px; height:100px; border-right:1px solid #ddd; text-align:left;}
  864. #product-view .container .tagcon .down_3d>a{ display:inline-block; background:#d82128;border-radius:5px; font-size:16px; padding:5px 0; line-height:45px; color:#fff; margin-top:20px; width:180px;}
  865. #product-view .container .tagcon .down_3d>a img{ display:inline-block;margin-left:25px; height:35px; width:auto;}
  866. #product-view .container .tagcon .down_3d>a:hover{ background:#ff9900; text-decoration:none;}
  867. #product-view .container .tagcon .down_3d>.tips{ position:absolute; left:230px; top:25px; z-index:2; display:block; padding:0 20px; line-height:20px; text-align:left; color:#aaa; font-size:14px;}
  868. #product-view .container .tagcon img{width:auto; max-height:100%; margin:0px auto;}
  869. #product-view .container .tagtit{ width:10%; padding:10% 5%; text-align:center;}
  870. #product-view .container .tagtit a{ display:block; width:90%; border-radius:30px; border:1px solid #ddd; padding:10px 0; font-size:14px; margin:7px auto; transition:all .35s;}
  871. #product-view .container .tagtit .A{ background:#d82128; color:#fff; border:1px solid #d82128;}
  872. #product-view .img-box{ position:relative; width:600px; height:600px; text-align:center; margin:0px auto;}
  873. #product-view .img-box .swiper-container { width: 100%;height: 100%;}
  874. #product-view .img-box .swiper-slide {text-align: center;background: #fff;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
  875. #product-view .img-box .swiper-slide a{ width:100%!important; height:100%!important;}
  876. #product-view .img-box .swiper-slide img{ width:100%!important; height:100%!important;}
  877. #product-view .img-box .swiper-pagination{ position:absolute; z-index:9; left:50%; bottom:30px; width:100%; margin-left:-50%;}
  878. #product-view .img-box .swiper-pagination>span{ margin:0px 2px;}
  879. #product-view .img-box .swiper-pagination .swiper-pagination-bullet-active {background: #d82128!important;}
  880. /*#product-view .container #tag0{ padding:0 100px;}
  881. #product-view .container #tag2{ padding:50px 100px; height:500px;}
  882. #product-view .container #tag3{ padding:50px;height:500px;}*/
  883. #product-view .model{ margin:0px auto; padding:20px 0; text-align:left;}
  884. #product-view .model .title{ display:block; padding:30px 0; color:#333; font-size:21px; font-weight:normal;}
  885. #product-view .model .text{ padding:50px 0; text-align:left;}
  886. #product-view .model .text table{ border-left:1px solid #ddd;border-top:1px solid #ddd; margin:0px; width:100%; min-width:1000px;}
  887. #product-view .model .text table tr:first-child{ background:#eee; font-weight:bold;color:#333;}
  888. #product-view .model .text table td{ text-align:left; font-size:14px; color:#666; padding:10px 20px; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
  889. #product-view .model .text table tr:hover td{ color:#d82128;}
  890. #product-view .model .text .tableWap{ overflow:hidden; overflow-x:auto;}
  891. #product-view .gotop{ padding:50px 0; text-align:center;}
  892. #product-view .gotop a{ display:inline-block; background:#d82128;border-radius:3px; padding:8px 30px; font-size:14px; color:#fff;}
  893. @media only screen and (max-width: 1280px) {
  894. #product-view .container .tagtit{ float:none!important;width:90%; padding:0; height:100px; line-height:100px; margin:0px auto;}
  895. #product-view .container .tagtit a{ display:inline-block!important; width:24%; height:20px; line-height:20px; margin:0px auto;}
  896. #product-view .container .tagcon{ width:100%; height:500px;}
  897. #product-view .container .tagcon img{width:100%; max-height:100%; margin:0px auto;}
  898. #product-view .container .tagcon iframe{ height:400px;}
  899. #product-view .container .tagcon .down_3d{ padding:0px 20px; height:50px;border:0!important;}
  900. #product-view .container .tagcon .down_3d>.tips{ left:200px; top:20px; font-size:12px; line-height:18px;}
  901. #product-view .img-box{width:500px; height:500px;}
  902. #product-view .model .text{ padding:20px 0;}
  903. #product-view .gotop{ padding:20px 0;}
  904. }
  905. @media only screen and (max-width: 420px) {
  906. #product-view .name{ font-size:21px; text-align:center;}
  907. #product-view .name img{ display:none;}
  908. #product-view .container{height:400px; overflow:hidden;}
  909. #product-view .container .tagtit a{ height:16px; line-height:16px; font-size:12px; }
  910. #product-view .container .tagcon{ width:100%; height:300px;}
  911. #product-view .img-box{width:300px; height:300px;}
  912. #product-view .container .tagcon iframe{ height:270px;}
  913. #product-view .container .tagcon .down_3d{ padding:0px; height:30px;}
  914. #product-view .container .tagcon .down_3d>a{ display:block; border-radius:0!important; font-size:12px; padding:0; line-height:30px; text-align:center; color:#fff; width:100%; margin:0px auto;}
  915. #product-view .container .tagcon .down_3d>a img{ height:20px;}
  916. #product-view .container .tagcon .down_3d>.tips{ display:none;}
  917. #product-view .model .title{ font-size:18px; padding:0!important;}
  918. #product-view .model .text{ padding:20px 0!important;}
  919. #product-view .model .text table{ min-width:500px;}
  920. #product-view .model .text table td{ font-size:12px; padding:8px 15px;}
  921. #product-view .gotop{text-align:center;}
  922. }
  923. @media only screen and (max-width: 320px) {
  924. #product-view .name{ font-size:18px; text-align:center;}
  925. }
  926. /* end*/
  927. /*
  928. research
  929. -----------------------------------------------------------------*/
  930. #research{ position:relative; width:100%; margin:0px auto;}
  931. #research .wrap{ width:90%; max-width:1460px; margin:0px auto 100px auto;}
  932. #research .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  933. #research .rd{ margin:0px auto;}
  934. #research .rd>.img{ position:relative; width:80%; height:400px; overflow:hidden; text-align:left;}
  935. #research .rd>.img>a .text{position:absolute; z-index:5; right:0; top:0; width:320px; height:240px; padding:80px 40px; background:rgba(255,255,255,.8); color:#666; font-size:14px; line-height:25px;}
  936. #research .rd>.img>a .text>h3{ display:block; padding:20px 0; color:#333;font-size:24px; font-weight:normal;}
  937. #research .rd>.img>a .text:after{ position:absolute; z-index:1; left:-12px; top:50%; margin-top:-8px; width:0;height:0;border-top: 8px solid transparent;border-right: 12px solid rgba(255,255,255,.8); border-bottom: 8px solid transparent; content:'';}
  938. #research .rd>.img>a img{ width:100%; height:auto;}
  939. #research .rd>.title{ width:20%;height:400px; background:#d82128; overflow:hidden; text-align:center;}
  940. #research .rd>.title>.icon{display:block; margin:60px auto 15px auto; transition:all 1s;}
  941. #research .rd>.title>.name{ font-size:18px; color:rgba(255,255,255,1);}
  942. #research .rd>.title>.more{ display:block; margin:20px auto; width:90px; height:30px; line-height:30px; text-align:center; font-size:14px; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.5); transition:all .35s;}
  943. #research .rd>.title>.more:hover{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.6);}
  944. #research .rd>.title:hover .icon{ transform:rotateY(360deg);}
  945. #research .other{ margin:2% auto;}
  946. #research .other>.rdachievement{ position:relative; width:59%; height:300px; overflow:hidden;}
  947. #research .other>.rdachievement>a .img{ width:70%; height:100%; overflow:hidden; background:url('../image/rdachievement-img.jpg') no-repeat; background-size:cover;}
  948. #research .other>.rdachievement>a .img>img{width:100%; height:auto; transition:all 3s;}
  949. #research .other>.rdachievement>a .text{ position:absolute; z-index:1; right:0; top:0; width:20%; height:200px; padding:50px 5%; text-align:left; color:#666; font-size:14px; line-height:25px; background:#ddd;}
  950. #research .other>.rdachievement>a .text>h3{ display:block; padding:10px 0; color:#333; font-size:24px; font-weight:normal;}
  951. #research .other>.rdachievement>a .text>img{ display:block; margin-top:10px; transition:all .35s;}
  952. #research .other>.rdachievement>a .text:after{ position:absolute; z-index:1; left:-12px; top:50%; margin-top:-8px; width:0;height:0;border-top: 8px solid transparent;border-right: 12px solid #ddd; border-bottom: 8px solid transparent; content:'';}
  953. #research .other>.rdachievement>a .text>img:hover{ margin-left:10px;}
  954. #research .other>.idea{ position:relative; width:39%; height:300px; background:#fff; overflow:hidden;}
  955. #research .other>.idea img{ width:100%; height:100%; transition:all .35s;}
  956. #research .other>.idea>a .text{position:absolute; z-index:2; left:40%; top:10%; width:240px; text-align:left; font-size:14px; line-height:20px; color:rgba(255,255,255,.6);}
  957. #research .other>.idea>a .text>h3{ display:block; padding:76px 0 40px 0; color:rgba(255,255,255,1)!important; font-size:36px; font-weight:normal;}
  958. #research .other>.idea>a:hover img{ opacity:.8;transform:scale(1.05);}
  959. @media only screen and (max-width: 1280px) {
  960. #research .other>.rdachievement{ height:270px;}
  961. #research .other>.rdachievement>a .text{ width:32%;}
  962. #research .other>.idea{height:270px;}
  963. }
  964. @media only screen and (max-width: 1040px) {
  965. #research .rd>.img{ width:61%; height:350px;}
  966. #research .rd>.title{ width:39%;height:350px;}
  967. #research .rd>.img>a .text{width:50%;}
  968. #research .rd>.img>a img{ width:126%;}
  969. #research .other>.rdachievement{ height:240px;}
  970. #research .other>.rdachievement>a .text{ width:50%;}
  971. #research .other>.rdachievement>a .text>h3{font-size:20px;}
  972. #research .other>.idea{height:240px;}
  973. #research .other>.idea img{ height:100%;}
  974. #research .other>.idea>a .text{left:30%; top:16%; width:60%;}
  975. #research .other>.idea>a .text>h3{padding:40px 0 20px 0; font-size:30px;}
  976. }
  977. @media only screen and (max-width: 780px) {
  978. #research .rd>.img>a .text{right:0; top:auto; bottom:0; width:90%; height:100px; padding:30px 5%;}
  979. #research .rd>.img{ float:none!important; width:100%; height:400px;}
  980. #research .rd>.title{ width:100%;height:300px;}
  981. #research .rd>.title>.icon{margin:25px auto 15px auto;}
  982. #research .other>.rdachievement{ width:49%; height:210px;}
  983. #research .other>.rdachievement>a .img{ width:100%; height:100%;}
  984. #research .other>.rdachievement>a .img>img{width:100%; height:100%;}
  985. #research .other>.rdachievement>a .text{ width:90%; height:100%; padding:0 5%; font-size:14px; line-height:25px; background:rgba(255,255,255,.6);}
  986. #research .other>.rdachievement>a .text>h3{padding:20px 0 10px 0; font-size:20px;}
  987. #research .other>.idea{ width:49%; height:210px;}
  988. #research .other>.idea>a .text{left:20%; top:10%; width:80%;}
  989. #research .other>.idea>a .text>h3{ padding:36px 0 20px 0;font-size:30px;}
  990. }
  991. @media only screen and (max-width: 420px) {
  992. #research .rd>.img{ height:300px;}
  993. #research .rd>.img>a .text{ position:relative; width:80%; height:140px; padding:10px 10%; font-size:13px; line-height:22px;}
  994. #research .rd>.img>a .text>h3{ padding:20px 0 10px 0; font-size:20px;}
  995. #research .rd>.title{height:150px;}
  996. #research .rd>.title>.icon{margin:15px auto 0 auto;}
  997. #research .rd>.title>.icon>img{height:60px; width:auto;}
  998. #research .rd>.title>.name{ font-size:14px;}
  999. #research .rd>.title>.more{ margin:10px auto; height:24px; line-height:24px; font-size:12px;}
  1000. #research .other>.rdachievement{ width:100%; margin:10px auto;}
  1001. #research .other>.rdachievement>a .text{ position:relative; width:80%; padding:0 10%;}
  1002. #research .other>.idea{ width:100%;}
  1003. #research .other>.idea>a .text{left:10%;}
  1004. }
  1005. /* end*/
  1006. /*
  1007. rd
  1008. -----------------------------------------------------------------*/
  1009. #rdcenter{ position:relative; width:100%; margin:0px auto;}
  1010. #rdcenter .wrap{ width:90%; max-width:1460px; margin:0px auto;}
  1011. #rdcenter .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1012. #rdcenter .container{ position:relative; margin:50px auto 120px auto;}
  1013. #rdcenter .container>.content{ padding-bottom:20px; font-size:16px; color:#888; text-align:left; line-height:30px;}
  1014. #rdcenter .container>.item{ margin:0 auto; text-align:left;}
  1015. #rdcenter .container>.item a{ position:relative; display:block; float:left; width:24.25%; margin-right:1%; margin-bottom:1%;}
  1016. #rdcenter .container>.item a:nth-child(4n){ margin-right:0!important;}
  1017. #rdcenter .container>.item a>span{ position:absolute; z-index:9; left:0; bottom:0; display:block;width:90%; height:50px; line-height:50px; padding:0 5%; color:#fff; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; font-size:16px; text-align:left; background:rgba(0,0,0,.5) url("http://www.gwsoft.com.cn/images/icon-arrow-up.png") no-repeat; background-position:95% 50%; background-size:20px auto; transition:all .35s;}
  1018. #rdcenter .container>.item a>img{width:100%; height:auto;}
  1019. #rdcenter .container>.item a:hover span{ background:rgba(216,33,40,.8) url("http://www.gwsoft.com.cn/images/icon-arrow-up.png") no-repeat; background-position:95% 50%; background-size:20px auto; height:70px; line-height:70px; color:#fff;}
  1020. @media only screen and (max-width: 780px) {
  1021. #rdcenter .container>.content{ font-size:12px; line-height:20px; }
  1022. #rdcenter .container>.item a{width:32.3%;}
  1023. #rdcenter .container>.item a:nth-child(3n){ margin-right:0!important;}
  1024. #rdcenter .container>.item a:nth-child(4n){ margin-right:1%!important;}
  1025. #rdcenter .container>.item a>span{ font-size:14px;}
  1026. }
  1027. @media only screen and (max-width: 420px){
  1028. #rdcenter .wrap>.title{ padding:30px 0; font-size:16px; font-weight:bold; }
  1029. #rdcenter .container{ margin:0 auto 50px auto; }
  1030. #rdcenter .container>.item a{width:49%;}
  1031. #rdcenter .container>.item a:nth-child(2n){ margin-right:0!important;}
  1032. #rdcenter .container>.item a:nth-child(3n){ margin-right:1%!important;}
  1033. #rdcenter .container>.item a:nth-child(4n){ margin-right:1%!important;}
  1034. }
  1035. /* end*/
  1036. /*
  1037. achievement
  1038. -----------------------------------------------------------------*/
  1039. #rd-achievement{ position:relative; width:100%; margin:0px auto;}
  1040. #rd-achievement .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1041. #rd-achievement .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1042. #rd-achievement .container{ margin:0px auto; padding:50px 0 150px 0;}
  1043. #rd-achievement .container>li{ display:block; background:#fff; padding:2%; border-bottom:1px solid #eee; transition:all .35s;}
  1044. #rd-achievement .container>li>a{ display:block;}
  1045. #rd-achievement .container .img{ position:relative; width:35%; text-align:left;}
  1046. #rd-achievement .container .img>img{ width:100%; height:auto; transition:all .35s;}
  1047. #rd-achievement .container .img:after{position:absolute; z-index:6; right:0; top:20%; width:0;height:0;border-top: 10px solid transparent;border-right: 16px solid rgba(255,255,255,1); border-bottom: 14px solid transparent; content:'';}
  1048. #rd-achievement .container .img:before{ position:absolute; z-index:1; right:0; top:0; width:0;height:100%; opacity:0; background:rgba(0,0,0,1); content:''; transition:all .35s;}
  1049. #rd-achievement .container .describe{ position:relative; width:62%; height:250px; text-align:left;}
  1050. #rd-achievement .container .describe>.name{ display:block; padding:15px 0; font-size:24px; font-weight:normal; color:#333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
  1051. #rd-achievement .container .describe>.text{ padding:20px 0; font-size:14px; color:#888; line-height:25px;}
  1052. #rd-achievement .container .describe>.more{ position:absolute; z-index:1; right:0; bottom:0; border-radius:3px; display:inline-block; padding:10px 20px; background:#d82128; color:#fff; font-size:12px; font-family:"Arial";}
  1053. #rd-achievement .container>li>a:hover .name{ color:#d82128;}
  1054. #rd-achievement .container>li:hover{ box-shadow:0 2px 5px rgba(0,0,0,.1);}
  1055. #rd-achievement .container>li:hover .img:before{ width:100%; opacity:.5;}
  1056. #rd-achievement .container>li:hover .more{background:#999;}
  1057. #rd-achievement .more{ padding:0px 0 100px 0; text-align:center;}
  1058. @media only screen and (max-width: 1280px) {
  1059. #rd-achievement .container{ padding:30px 0;}
  1060. #rd-achievement .container .describe>.name{ font-size:20px;}
  1061. #rd-achievement .container .describe>.text{ padding:0; height:50px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
  1062. }
  1063. @media only screen and (max-width: 420px) {
  1064. #rd-achievement .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1065. #rd-achievement .container>li{ padding:3%; margin-bottom:5%;}
  1066. #rd-achievement .container .img{ width:100%!important; float:none!important;}
  1067. #rd-achievement .container .img:after{display:none;}
  1068. #rd-achievement .container .describe{ width:100%!important; float:none!important; height:auto; padding-bottom:60px;}
  1069. #rd-achievement .container .describe>.name{ font-size:16px; padding:10px 5px;}
  1070. #rd-achievement .container .describe>.text{ padding:0 5px; height:40px; font-size:12px; line-height:20px;}
  1071. #rd-achievement .container .describe>.more{ padding:8px 15px; color:#d82128; background:none;}
  1072. }
  1073. /* end*/
  1074. /*
  1075. achievement view
  1076. -----------------------------------------------------------------*/
  1077. #rd-achievement-view{ position:relative; width:100%; margin:0px auto;}
  1078. #rd-achievement-view .wrap{ width:90%; max-width:1460px; margin:0px auto;}
  1079. #rd-achievement-view .wrap>.title{ position:relative; text-align:center; padding:50px 0; font-size:24px; color:#333;}
  1080. #rd-achievement-view .container{ margin:0px auto;}
  1081. #rd-achievement-view .container .content{ width:100%; text-align:left;}
  1082. #rd-achievement-view .container .content>.time{ font-size:12px; color:#999; text-align:center;}
  1083. #rd-achievement-view .container .content>.text{ padding:30px 0; font-size:14px; line-height:25px; color:#666;}
  1084. #rd-achievement-view .container .content>.text img{ max-width:100%; height:auto;}
  1085. #rd-achievement-view .container .content>.text table{ width:100%; border-left:1px solid #ddd; border-top:1px solid #ddd;}
  1086. #rd-achievement-view .container .content>.text table>td{ border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:5px;}
  1087. #rd-achievement-view .url{ position:relative; width:100%; padding:50px 0; text-align:center; margin:0px auto; overflow:hidden;}
  1088. #rd-achievement-view .url a{ position:relative; z-index:99; display:inline-block; margin-right:30px; color:#d82128; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
  1089. #rd-achievement-view .url a>img{ height:25px; width:auto; margin-right:5px;}
  1090. #rd-achievement-view .url a:hover{ text-decoration:underline;}
  1091. @media only screen and (max-width: 1280px) {
  1092. #rd-achievement-view .url{ text-align:left;}
  1093. #rd-achievement-view .url:after{ display:none;}
  1094. #rd-achievement-view .url a{display:block; padding:5px 0;}
  1095. }
  1096. @media only screen and (max-width: 420px) {
  1097. #rd-achievement-view .wrap>.title{ padding:0 0 10px 0!important; font-size:16px; font-weight:bold;}
  1098. }
  1099. /* end*/
  1100. /*
  1101. idea
  1102. -----------------------------------------------------------------*/
  1103. #idea{ position:relative; width:100%; margin:0px auto;}
  1104. #idea .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1105. #idea .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1106. #idea .container{ position:relative; margin:50px auto 120px auto;}
  1107. #idea .container>.content{ margin-bottom:20px; position:relative;}
  1108. #idea .container>.content>.text{ position:absolute; z-index:4; right:0; top:0; background:rgba(255,255,255,.8); width:30%; height:100%; padding:0 5%; text-align:left;}
  1109. #idea .container>.content>.text:after{ position:absolute; z-index:1; left:-16px; top:50%; margin-top:-12px; width:0;height:0;border-top: 12px solid transparent;border-right: 16px solid rgba(255,255,255,.8); border-bottom: 12px solid transparent; content:'';}
  1110. #idea .container>.content>.text>h3{ position:relative; color:#d82128; font-size:24px; font-weight:normal; padding:22% 0 8% 0;}
  1111. #idea .container>.content>.text>h3:after{ position:absolute; left:0; bottom:10%; background:#d82128; width:20%; height:2px; content:'';}
  1112. #idea .container>.content>.text>span{ font-size:16px; color:#888; text-align:left; line-height:30px;}
  1113. #idea .container>.content>img{ width:100%; height:auto; margin:0 auto;}
  1114. #idea .container>.feedback{ width:100%; margin:0 auto;}
  1115. #idea .container>.feedback .item{ position:relative; background:#fff; border:1px solid #ddd; overflow:hidden; margin-top:-1px;}
  1116. #idea .container>.feedback .item:after{position:absolute; z-index:1; left:250px; top:0; width:1px; height:100%; background:#ddd; content:'';}
  1117. #idea .container>.feedback .item .tit{ float:left; width:14.8%; max-width:250px; min-width:250px; height:65px; line-height:65px; text-align:center; border-right:1px solid #ddd; background:#f9f9f9; font-size:14px;}
  1118. #idea .container>.feedback .item .sel{ text-align:left; width:70%; padding:0 30px; background:#fff; float:left;height:65px; line-height:65px;}
  1119. #idea .container>.feedback .item a{ display:inline-block; margin-right:20px; height:30px; line-height:30px; padding:0 20px; font-size:14px;}
  1120. #idea .container>.feedback .item .radioA{ background:#d82128; color:#fff;}
  1121. #idea .container>.feedback .item .inputtext{ outline:none; border:0 !important; font-family:'微软雅黑'; width:75%; float:left; height:65px; line-height:65px; padding:0 30px; }
  1122. #idea .container>.feedback .item .inputtext:hover -webkit-input-placeholder{ display:none;}
  1123. #idea .container>.feedback .item .textareatext{ position:relative; outline:none; resize:none; border:0 !important; font-family:'微软雅黑'; float:left; width:75%; height:100%; line-height:20px; padding:30px;}
  1124. #idea .container>.feedback .item .A::-webkit-input-placeholder{ color:#d82128 !important;}
  1125. #idea .container>.feedback .item img{position:absolute; left:24%; top:20px;}
  1126. #idea .container>.feedback .item>.inline{ display:inline-block; float:left; width:50%; border-left:1px solid #ddd; border-top:1px solid #ddd; margin-left:-1px; margin-top:-1px;}
  1127. #idea .container>.feedback .item>.inline .tit{ min-width:250px;}
  1128. #idea .container>.feedback .item>.inline .inputtext{ width:36%;}
  1129. #idea .container>.feedback .item>.inline .sel{ width:36%;}
  1130. #idea .btn{ padding:20px 0 30px 0; text-align:center;}
  1131. #idea .btn>input{ width:200px; margin:0 auto; background:#d82128; outline:none; border:0!important; font-family:'微软雅黑'; color:#fff; font-size:16px; padding:12px 0; cursor:pointer;}
  1132. @media only screen and (max-width: 1280px) {
  1133. #idea .container>.content>.text>h3{ font-size:20px; padding:20% 0 8% 0;}
  1134. #idea .container>.content>.text>span{ font-size:14px; line-height:20px;}
  1135. #idea .container>.feedback .item:after{left:160px;}
  1136. #idea .container>.feedback .item .tit{ max-width:160px; min-width:160px;}
  1137. #idea .container>.feedback .item a{ margin-right:0px; padding:0 10px; font-size:12px;}
  1138. #idea .container>.feedback .item .inputtext{ width:65%;}
  1139. #idea .container>.feedback .item .textareatext{ width:65%;}
  1140. #idea .container>.feedback .item>.inline .tit{ min-width:160px;}
  1141. #idea .container>.feedback .item>.inline .inputtext{ width:32%;}
  1142. #idea .container>.feedback .item>.inline .sel{ width:32%;}
  1143. #idea .container>.feedback .item img{ left:50%;}
  1144. }
  1145. @media only screen and (max-width: 780px) {
  1146. #idea .container>.content>.text{ width:50%;}
  1147. #idea .container>.content>.text>h3{ font-size:20px; padding:12% 0 8% 0;}
  1148. #idea .container>.feedback .item:after{left:100px;}
  1149. #idea .container>.feedback .item .tit{ max-width:100px; min-width:100px;}
  1150. #idea .container>.feedback .item>.inline{ width:100%; float:none!important;}
  1151. #idea .container>.feedback .item>.inline .tit{ min-width:100px;}
  1152. #idea .container>.feedback .item>.inline .inputtext{ width:40%;}
  1153. #idea .container>.feedback .item .sel{ padding:0 15px;}
  1154. #idea .container>.feedback .item .inputtext{ width:40%; padding:0 15px;}
  1155. #idea .container>.feedback .item .textareatext{ width:40%; padding:15px;}
  1156. #idea .container>.feedback .item img{ left:auto; right:10%;}
  1157. #idea .btn>input{ width:100%;}
  1158. }
  1159. @media only screen and (max-width: 420px){
  1160. #idea .wrap>.title{ padding:30px 0; font-size:16px; font-weight:bold; }
  1161. #idea .container{ margin:0 auto 20px auto; }
  1162. #idea .container>.content>.text{ position:relative; right:0; top:0; background:none!important; width:100%; height:100%; padding:0 !important; text-align:left;}
  1163. #idea .container>.content>.text>h3{ font-size:16px; padding:4% 0;}
  1164. }
  1165. /*
  1166. talents
  1167. -----------------------------------------------------------------*/
  1168. #talents{ position:relative; width:100%; margin:0px auto;}
  1169. #talents .wrap{ width:90%; max-width:1460px; margin:0px auto;}
  1170. #talents .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1171. #talents .container{ position:relative; padding:50px 0 150px 0;}
  1172. #talents .container>.img{ width:40%;}
  1173. #talents .container>.img>img{ width:100%; height:auto;}
  1174. #talents .container>.content{ width:55%; text-align:left;}
  1175. #talents .container>.content>h3{ display:block; padding:6px 20px; margin:20px 0 40px 0; color:#d82128; font-size:24px;font-weight:normal; border-left:3px solid #d82128;}
  1176. #talents .container>.content>p{ font-size:16px; line-height:25px; color:#666; margin-bottom:30px;}
  1177. @media only screen and (max-width: 1280px) {
  1178. #talents .container>.img{ width:100%;}
  1179. #talents .container>.content{ width:100%;}
  1180. }
  1181. @media only screen and (max-width: 420px) {
  1182. #talents .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1183. #talents .wrap>.container{ padding:0 0 20px 0;}
  1184. #talents .container>.content>h3{ font-size:20px;}
  1185. #talents .container>.content>p{ font-size:14px; line-height:20px;}
  1186. }
  1187. /* end*/
  1188. /*
  1189. jobs
  1190. -----------------------------------------------------------------*/
  1191. #jobs{ position:relative; width:100%; margin:0px auto;}
  1192. #jobs .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1193. #jobs .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1194. #jobs .container{ margin:0 auto; padding:50px 0 150px 0; position:relative; overflow:hidden;}
  1195. #jobs .container>.list-tr{ width:100%; margin:0px auto; background:#d82128;}
  1196. #jobs .container>.list-tr>li{ position:relative; display:block; float:left; width:20%; height:60px; line-height:60px; color:#fff; font-size:16px; text-align:center;}
  1197. #jobs .container>.list-tr>li:after{position:absolute; z-index:9; top:0; right:0; width:1px; height:100%; background:rgba(255,255,255,.5); content:'';}
  1198. #jobs .container>.list-tr>li:last-of-type:after{ display:none;}
  1199. #jobs .container>.list-td{ width:100%; height:auto; margin:0px auto;}
  1200. #jobs .container>.list-td>li{ position:relative; display:block; cursor:pointer; overflow:hidden; background:#fff;}
  1201. #jobs .container>.list-td>li>ul>li{ position:relative; display:block; float:left; width:16%; padding:20px 2%; border-bottom:1px solid #ddd; color:#666; font-size:14px; text-align:center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
  1202. #jobs .container>.list-td>li>ul>li:last-of-type:after{ position:absolute; z-index:1; right:20%; top:50%; margin-top:-12px; width:24px; height:24px; background:url("../image/icon-jobs-arrow.png") no-repeat; background-size:100% auto; content:'';}
  1203. #jobs .container>.list-td>li.A>ul>li{ color:#d82128;}
  1204. #jobs .container>.list-td>li.A>ul>li:last-of-type:after{ background-position:0 -24px;}
  1205. #jobs .container>.list-td>li>ul:after{position:absolute; z-index:9; top:0; right:0; width:1px; height:100%; background:#ddd; content:'';}
  1206. #jobs .container>.list-td>li>ul:before{position:absolute; z-index:9; top:0; left:0; width:1px; height:100%; background:#ddd; content:'';}
  1207. #jobs .container>.list-td>li:hover, #jobs .container>.list-td>li.A{ background:#fff5f5;}
  1208. #jobs .container>.list-td>li>.con{ display:none; clear:both; padding:50px; text-align:left; background:#fff;border-bottom:1px solid #ddd;}
  1209. #jobs .container>.list-td>li>.con .add{ padding:5px 0; font-size:14px; line-height:20px; color:#666; display:none;}
  1210. #jobs .container>.list-td>li>.con .department{ padding:5px 0; font-size:14px; line-height:20px; color:#666; display:none;}
  1211. #jobs .container>.list-td>li>.con .quantity{ padding:5px 0; font-size:14px; line-height:20px; color:#666; display:none;}
  1212. #jobs .container>.list-td>li>.con .tit{ font-size:14px; font-weight:bold; color:#333; padding:5px 0;}
  1213. #jobs .container>.list-td>li>.con .txt{ font-size:14px; line-height:20px; color:#666; padding-bottom:10px;}
  1214. @media only screen and (max-width: 1280px) {
  1215. #jobs .container>.list-tr>li{ width:25%;}
  1216. #jobs .container>.list-tr>li.td4{ display:none!important;}
  1217. #jobs .container>.list-td>li>ul>li{ width:21%;}
  1218. #jobs .container>.list-td>li>ul>li.td4{ display:none!important;}
  1219. #jobs .container>.list-td>li>ul>li:last-of-type:after{ right:10%;}
  1220. #jobs .container>.list-td>li>.con .add{ display:block;}
  1221. }
  1222. @media only screen and (max-width: 420px) {
  1223. #jobs .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1224. #jobs .container{ padding:0 0 50px 0!important;}
  1225. #jobs .container>.list-tr>li{ width:33%;}
  1226. #jobs .container>.list-tr>li.td2{ display:none!important;}
  1227. #jobs .container>.list-td>li>ul>li{ width:29%; font-size:12px;}
  1228. #jobs .container>.list-td>li>ul>li.td2{ display:none!important;}
  1229. #jobs .container>.list-td>li>ul>li:last-of-type{ width:26%; padding-right:5%;}
  1230. #jobs .container>.list-td>li>ul>li:last-of-type:after{ right:5%;}
  1231. #jobs .container>.list-td>li>.con{ padding:20px;}
  1232. #jobs .container>.list-td>li>.con .department{ display:block;}
  1233. #jobs .container>.list-td>li>.con .quantity{ display:block;}
  1234. }
  1235. /* end*/
  1236. /*
  1237. self
  1238. -----------------------------------------------------------------*/
  1239. #self{ position:relative; width:100%; margin:0px auto;}
  1240. #self .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1241. #self .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1242. #self .container{ position:relative; margin:50px auto 120px auto;}
  1243. #self .container>.content{padding-bottom:20px; font-size:16px; color:#888; text-align:left; line-height:30px;}
  1244. #self .container>.feedback{ width:100%; margin:0 auto;}
  1245. #self .container>.feedback .item{ position:relative; background:#fff; border:1px solid #ddd; overflow:hidden; margin-top:-1px;}
  1246. #self .container>.feedback .item:after{position:absolute; z-index:1; left:250px; top:0; width:1px; height:100%; background:#ddd; content:'';}
  1247. #self .container>.feedback .item .tit{ float:left; width:14.8%; max-width:250px; min-width:250px; height:65px; line-height:65px; text-align:center; border-right:1px solid #ddd; background:#f9f9f9; font-size:14px;}
  1248. #self .container>.feedback .item .sel{ text-align:left; width:70%; padding:0 30px; background:#fff; float:left;height:65px; line-height:65px;}
  1249. #self .container>.feedback .item a{ display:inline-block; margin-right:20px; height:30px; line-height:30px; padding:0 20px; font-size:14px;}
  1250. #self .container>.feedback .item .radioA{ background:#d82128; color:#fff;}
  1251. #self .container>.feedback .item .inputtext{ outline:none; border:0 !important; font-family:'微软雅黑'; width:75%; float:left; height:65px; line-height:65px; padding:0 30px; }
  1252. #self .container>.feedback .item .inputtext:hover -webkit-input-placeholder{ display:none;}
  1253. #self .container>.feedback .item .textareatext{ position:relative; outline:none; resize:none; border:0 !important; font-family:'微软雅黑'; float:left; width:75%; height:100%; line-height:20px; padding:30px;}
  1254. #self .container>.feedback .item .A::-webkit-input-placeholder{ color:#d82128 !important;}
  1255. #self .container>.feedback .item img{position:absolute; left:24%; top:20px;}
  1256. #self .container>.feedback .item>.inline{ display:inline-block; float:left; width:33.33%; border-left:1px solid #ddd; border-top:1px solid #ddd; margin-left:-1px; margin-top:-1px;}
  1257. #self .container>.feedback .item>.inline .tit{ min-width:250px;}
  1258. #self .container>.feedback .item>.inline .inputtext{ width:36%;}
  1259. #self .container>.feedback .item>.inline .sel{ width:36%;}
  1260. #self .btn{ padding:20px 0 30px 0; text-align:center;}
  1261. #self .btn>input{ width:200px; margin:0 auto; background:#d82128; outline:none; border:0!important; font-family:'微软雅黑'; color:#fff; font-size:16px; padding:12px 0; cursor:pointer;}
  1262. @media only screen and (max-width: 1420px) {
  1263. #self .container>.feedback .item:after{left:200px;}
  1264. #self .container>.feedback .item .tit{ max-width:200px; min-width:200px;}
  1265. #self .container>.feedback .item>.inline .tit{ min-width:200px;}
  1266. #self .container>.feedback .item>.inline .inputtext{ width:32%;}
  1267. #self .container>.feedback .item>.inline .sel{ width:32%;}
  1268. #self .container>.feedback .item a{ margin-right:10px; padding:0 10px;}
  1269. }
  1270. @media only screen and (max-width: 1280px) {
  1271. #self .container>.content{ font-size:12px; line-height:20px; }
  1272. #self .container>.feedback .item>.inline{ width:49%;}
  1273. #self .container>.feedback .item>.inline .inputtext{ width:50%;}
  1274. #self .container>.feedback .item>.inline .sel{ width:50%;}
  1275. #self .container>.feedback .item img{ left:30%;}
  1276. }
  1277. @media only screen and (max-width: 1040px) {
  1278. #self .container>.feedback .item:after{left:160px;}
  1279. #self .container>.feedback .item .tit{ max-width:160px; min-width:160px;}
  1280. #self .container>.feedback .item a{ margin-right:0px; padding:0 10px; font-size:12px;}
  1281. #self .container>.feedback .item .inputtext{ width:65%;}
  1282. #self .container>.feedback .item .textareatext{ width:65%;}
  1283. #self .container>.feedback .item>.inline .tit{ min-width:160px;}
  1284. #self .container>.feedback .item>.inline .inputtext{ width:32%;}
  1285. #self .container>.feedback .item>.inline .sel{ width:32%;}
  1286. #self .container>.feedback .item img{ left:50%;}
  1287. #self .btn>input{ width:100%;}
  1288. }
  1289. @media only screen and (max-width: 780px) {
  1290. #self .container>.feedback .item:after{left:100px;}
  1291. #self .container>.feedback .item .tit{ max-width:100px; min-width:100px;}
  1292. #self .container>.feedback .item>.inline{ width:100%; float:none!important;}
  1293. #self .container>.feedback .item>.inline .tit{ min-width:100px;}
  1294. #self .container>.feedback .item>.inline .inputtext{ width:40%;}
  1295. #self .container>.feedback .item .sel{ padding:0 15px;}
  1296. #self .container>.feedback .item .inputtext{ width:40%; padding:0 15px;}
  1297. #self .container>.feedback .item .textareatext{ width:40%; padding:15px;}
  1298. #self .container>.feedback .item img{ left:auto; right:10%;}
  1299. }
  1300. @media only screen and (max-width: 420px){
  1301. #self .wrap > .title{ padding:30px 0; font-size:16px; font-weight:bold; }
  1302. #self .container{ margin:0 auto 20px auto; }
  1303. }
  1304. /* end*/
  1305. /*
  1306. service
  1307. -----------------------------------------------------------------*/
  1308. #service{ position:relative; width:100%; margin:0px auto;}
  1309. #service .network{position:relative; margin:0px auto; width:100%; padding:0;}
  1310. #service .network>.img{ position:relative; width:100%; margin:0px auto;}
  1311. #service .network>.img>img{ width:100%; height:auto; transition:all .35s;}
  1312. #service .network>.wrap{ margin:0px auto; border-bottom:1px solid #ddd;}
  1313. #service .network>.wrap>.map{ position:relative; width:70%;height:500px;}
  1314. #service .network>.wrap>.map:after{position:absolute; z-index:1; left:0; top:-80px; background:rgba(0,0,0,.3); width:100%; height:80px; content:'';}
  1315. #service .network>.wrap>.container{ position:relative; width:30%; height:100%; background:#fff;}
  1316. #service .network>.wrap>.container .title{ position:absolute; z-index:1; left:0; top:-80px; background:#d82128; width:90%; height:80px; line-height:80px; padding:0px 5%; font-size:24px; text-align:left; color:#fff;}
  1317. #service .network>.wrap>.container .text{ text-align:left; padding:15% 10%; font-size:16px; color:#444;}
  1318. #service .network>.wrap>.container .text>p{ position:relative; padding:10px 0;}
  1319. #service .network>.wrap>.container .text>p span.txt{ position:relative; display:inline-block; font-size:14px; padding:0 10px; color:#999;}
  1320. #service .network>.wrap>.container .text>p span.icon-tips-voice, #service .network>.wrap>.container .text>p span.icon-tips-qrcode{ position:absolute; top:2px; right:-10px; display:inline-block; cursor:pointer; width:20px; height:20px; background:url("../image/icon-tips-gray.png") no-repeat center center; background-size:16px auto; transition:all .35s;}
  1321. #service .network>.wrap>.container .text>p span.icon-tips-voice:hover, #service .network>.wrap>.container .text>p span.icon-tips-qrcode:hover{ background:url("../image/icon-tips-highlight.png") no-repeat center center;background-size:16px auto;}
  1322. #service .network>.wrap>.container .voice{ display:none; position:absolute; z-index:9; top:50%; left:122px; text-align:left; width:140px; height:100px; margin-top:-60px; border:4px solid #d82128; background:#fff; padding:10px; color:#d82128;font-size:12px; line-height:21px; }
  1323. #service .network>.wrap>.container .voice:after{ position:absolute; z-index:1; left:-12px; top:50%; margin-top:-8px; width:0;height:0;border-top: 8px solid transparent;border-right: 12px solid #d82128; border-bottom: 8px solid transparent; content:'';}
  1324. #service .network>.wrap>.container .qrcode{ display:none; position:absolute; z-index:9; top:50%; left:110px; margin-top:-75px; width:150px; height:150px; text-align:left; border:4px solid #d82128;}
  1325. #service .network>.wrap>.container .qrcode>img{ width:100%; height:auto;}
  1326. #service .network>.wrap>.container .qrcode:after{ position:absolute; z-index:1; left:-12px; top:50%; margin-top:-8px; width:0;height:0;border-top: 8px solid transparent;border-right: 12px solid #d82128; border-bottom: 8px solid transparent; content:'';}
  1327. #service .faq{ width:90%; margin:0px auto; padding:50px 0;}
  1328. #service .faq>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1329. #service .faq>.wrap{ padding:0; margin:20px auto; border:1px solid #ddd;}
  1330. #service .faq .container{ width:70%; text-align:left; border-right:1px solid #ddd;}
  1331. #service .faq .container>ul{ width:100%; margin:0px auto;}
  1332. #service .faq .container>ul>li{ width:27.2%; height:240px; float:left; padding:5% 3%; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}
  1333. #service .faq .container>ul>li .title{ padding:10px 0; text-align:left; font-size:20px; color:#333;}
  1334. #service .faq .container>ul>li .list{ padding:10px 0;}
  1335. #service .faq .container>ul>li .list>a{ display:block; padding:5px 0; font-size:14px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
  1336. #service .faq .container>ul>li:nth-child(3n){ border-right:0!important;}
  1337. #service .faq .question{ width:23%; padding:2% 3%;}
  1338. #service .faq .question>.title{ padding:30px 0; text-align:left; font-size:20px; color:#d82128;}
  1339. #service .faq .question>.title>span{position:relative; display:inline-block; float:left; width:64px; height:27px; overflow:hidden;}
  1340. #service .faq .question>.title>span>img{position:absolute; z-index:1; top:-16px; left:0;}
  1341. #service .faq .question>form{ margin:0px auto; text-align:left;}
  1342. #service .faq .question>form>dl{ width:100%; margin:0px auto;}
  1343. #service .faq .question>form>dl dt {width:50px;line-height: 25px; font-size:14px; color:#666;}
  1344. #service .faq .question>form>dl dt, #service .faq .question>form>dl dd {padding: 5px 0;}
  1345. #service .faq .question>form>dl dd {padding-left: 50px;margin-top: -34px;line-height: 30px;}
  1346. #service .faq .question>form>dl input, #service .faq .question>form>dl textarea {border: solid 1px #ddd;color: #888;padding: 2px;}
  1347. #service .faq .question>form>dl input {width:92%;height:35px;line-height:35px; padding:0 4%; font-family:"微软雅黑";font-size:14px;}
  1348. #service .faq .question>form>dl #checksn{ width:40%; margin-right:10px;}
  1349. #service .faq .question>form>dl textarea {width: 92%;height:80px; padding:4%; overflow: auto;font-family:"微软雅黑";font-size:14px;}
  1350. #service .faq .question .btn{ padding:20px 0 30px 0; text-align:center;}
  1351. #service .faq .question .btn>input{ width:100%; background:#d82128; border:0!important; font-family:'微软雅黑'; color:#fff; font-size:16px; padding:8px 0; cursor:pointer;}
  1352. #service .download-supplier{width:90%; margin:0px auto; padding:100px 0 50px 0;}
  1353. #service .download-supplier>.supplier{ display:block; width:35%; text-align:left;}
  1354. #service .download-supplier>.supplier>.img{ position:relative; width:100%; margin:0px auto; overflow:hidden;}
  1355. #service .download-supplier>.supplier>.img>img{ width:100%; height:auto; transition:all 3s;}
  1356. #service .download-supplier>.supplier>.img:hover img{transform:scale(1.3);}
  1357. #service .download-supplier>.supplier>.img:after{ position:absolute; z-index:9; left:10%; bottom:0; content:''; width: 0;height: 0;border-left: 12px solid transparent;border-right: 12px solid transparent;border-bottom: 15px solid #fff;}
  1358. #service .download-supplier>.supplier>.container{border:1px solid #ddd;border-top:0!important; padding:5%;}
  1359. #service .download-supplier>.supplier>.container .title{ font-size:24px; color:#333; padding:20px 0;}
  1360. #service .download-supplier>.supplier>.container .text{ font-size:14px; color:#777; line-height:24px;}
  1361. #service .download-supplier>.supplier>.container .more{ text-align:left; padding:15px 0;}
  1362. #service .download-supplier>.supplier>.container .more>a{display:inline-block; background:#d82128; font-size:16px; color:#fff; padding:10px 35px; transition:all .35s;}
  1363. #service .download-supplier>.supplier>.container .more>a:hover{ background:#333;}
  1364. #service .download-supplier>.download{ display:block; width:62%; text-align:left;}
  1365. #service .download-supplier>.download>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1366. #service .download-supplier>.download>.title .more{ float:right; display:block; color:#999; font-size:25px; transition:all .35s;}
  1367. #service .download-supplier>.download>.title .more:hover{ color:#d82128;}
  1368. #service .download-supplier>.download>.container{ margin:0px auto;}
  1369. #service .download-supplier>.download>.container>.list-tr{ width:100%; margin:0px auto; background:#666;}
  1370. #service .download-supplier>.download>.container>.list-tr>li{ position:relative; display:block; float:left; width:25%; height:60px; line-height:60px; color:#fff; font-size:16px; text-align:center;}
  1371. #service .download-supplier>.download>.container>.list-tr>li:after{position:absolute; z-index:9; top:0; right:0; width:1px; height:100%; background:rgba(255,255,255,.5); content:'';}
  1372. #service .download-supplier>.download>.container>.list-tr>li:last-of-type:after{ display:none;}
  1373. #service .download-supplier>.download>.container>.list-td{ position:relative; width:100%; margin:0px auto;}
  1374. #service .download-supplier>.download>.container>.list-td>li{ position:relative; display:block; float:left; width:25%; height:50px; line-height:50px; border-bottom:1px solid #ddd; color:#666; font-size:14px; text-align:center;}
  1375. #service .download-supplier>.download>.container>.list-td>li:after{position:absolute; z-index:9; top:0; right:0; width:1px; height:100%; background:#ddd; content:'';}
  1376. #service .download-supplier>.download>.container>.list-td:before{position:absolute; z-index:9; top:0; left:0; width:1px; height:100%; background:#ddd; content:'';}
  1377. #service .dealers{ width:100%; margin:0px auto; padding:50px 0; background:url("http://www.gwsoft.com.cn/images/dealers-bg.jpg") no-repeat 50% 50%; background-size:100% auto;}
  1378. #service .dealers>.wrap{ width:90%; margin:0px auto;}
  1379. #service .dealers .title{ position:relative; text-align:center; padding:50px 0; font-size:24px; color:#333;}
  1380. #service .dealers .container{ padding:70px 0; margin:0px auto;}
  1381. #service .dealers .container .item{ width:20%; float:left; background:url("http://www.gwsoft.com.cn/images/icon-dealers-arrow.png") no-repeat 100% 50%; background-size:30px auto;}
  1382. #service .dealers .container .item:last-of-type{ background:none!important;}
  1383. #service .dealers .container>.item>p{ position:relative; display:block; cursor:pointer; width:150px; overflow:hidden; background:#999; border-radius:10px; padding:20px 0; font-size:16px; color:#fff; margin:0px auto;}
  1384. #service .dealers .container>.item>p>img{ display:block; width:80px; height:auto; margin:0px auto 10px auto;}
  1385. #service .dealers .container .item>p:after{position:absolute; z-index:2; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; background:rgba(255,255,255,.1); opacity:0; content:''; transition:all .35s;}
  1386. #service .dealers .container .item>p:hover:after{ left:0; top:0; width:100%; height:100%; margin:0; opacity:1;}
  1387. #service .dealers .container .item>p:before{position:absolute; z-index:2; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; background:rgba(255,255,255,.1); opacity:0; content:''; transition:all 1s;}
  1388. #service .dealers .container .item>p:hover:before{ left:0; top:0; width:100%; height:100%; margin:0; opacity:1;}
  1389. #service .dealers .more{ padding:20px; text-align:center;}
  1390. #service .dealers .more>a{ display:inline-block; background:#d82128; font-size:16px; color:#fff; padding:12px 50px; transition:all .35s;}
  1391. #service .dealers .more>a:hover{ background:#333;}
  1392. /* end*/
  1393. /*
  1394. dealers
  1395. -----------------------------------------------------------------*/
  1396. #dealers{ position:relative; width:100%; margin:0px auto;}
  1397. #dealers .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1398. #dealers .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1399. #dealers .container{ position:relative; margin:50px auto 120px auto;}
  1400. #dealers .container>.content{ width:100%; margin:0 auto;}
  1401. #dealers .container>.content .text{ padding-bottom:20px; font-size:16px; color:#888; text-align:left; line-height:30px;}
  1402. #dealers .container>.content .text>h3{ display:block; padding:5px 0; font-size:18px; color:#d82128;}
  1403. #dealers .container>.content .text>h3 strong{font-size:25px;}
  1404. #dealers .container>.content .tag{ margin:0 auto;}
  1405. #dealers .container>.content .tag>.tagtit{ text-align:left;}
  1406. #dealers .container>.content .tag>.tagtit>a{display:inline-block; width:20%; padding:20px 0; font-size:16px; background:#fff; border:1px solid #ddd; text-align:center; margin-right:10px; transition:all .35s;}
  1407. #dealers .container>.content .tag>.tagtit>a.A{ background:#d82128; color:#fff;border:1px solid #d82128;}
  1408. #dealers .container>.content .tag>.tagcon{ display:none; padding:20px 0; text-align:left;}
  1409. #dealers .container>.content .tag>.tagcon table{ width:99%; border-left:1px solid #ddd;border-top:1px solid #ddd;}
  1410. #dealers .container>.content .tag>.tagcon td{ font-size:14px; color:#888; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:20px;}
  1411. #dealers .container>.content .tag>.tagcon .firstRow td{ font-size:18px; color:#333;}
  1412. #dealers .container>.content .btn{ padding:30px; text-align:center;}
  1413. #dealers .container>.content .btn>a{ display:inline-block; background:#eee; border:2px solid #eee; padding:15px 100px; color:#999;font-size:14px; transition:all .35s;}
  1414. #dealers .container>.content .btn>a:hover{ background:none!important; color:#d82128; border:2px solid #d82128;}
  1415. #dealers .container>.feedback{ width:100%; margin:0 auto;}
  1416. #dealers .container>.feedback .item{ position:relative; background:#fff; border:1px solid #ddd; overflow:hidden; margin-top:-1px;}
  1417. #dealers .container>.feedback .item>.tit{ height:65px; line-height:65px; float:left; width:14.8%; text-align:center; border-right:1px solid #ddd; background:#f9f9f9; font-size:14px;}
  1418. #dealers .container>.feedback .item>.sel{ text-align:left; width:83%; padding:0 1%; background:#fff; float:left;height:65px; line-height:65px;}
  1419. #dealers .container>.feedback .item a{ display:inline-block; margin-left:20px; height:30px; line-height:30px; padding:0 20px; font-size:14px;}
  1420. #dealers .container>.feedback .item .radioA{ background:#d82128; color:#fff;}
  1421. #dealers .container>.feedback .item>.inputtext{height:65px; line-height:65px; outline:none; border:0 !important; font-family:'微软雅黑'; padding:0 2%; width:81%; float:left;}
  1422. #dealers .container>.feedback .item>.inputtext:hover -webkit-input-placeholder{ display:none;}
  1423. #dealers .container>.feedback .item .A::-webkit-input-placeholder{ color:#d82128 !important;}
  1424. #dealers .container>.feedback .item img{position:absolute; left:24%; top:20px;}
  1425. #dealers .btn{ padding:20px 0 30px 0; text-align:center;}
  1426. #dealers .btn>input{ width:200px; margin:0 auto; background:#d82128; outline:none; border:0!important; font-family:'微软雅黑'; color:#fff; font-size:16px; padding:12px 0; cursor:pointer;}
  1427. @media only screen and (max-width: 1280px){
  1428. #dealers .container>.content .text{ font-size:12px; line-height:20px; }
  1429. #dealers .container>.content .text > h3{ font-size:14px;}
  1430. #dealers .container>.content .text > h3 strong{ font-size:18px; }
  1431. #dealers .container>.content .tag>.tagtit>a{ width:48.8%; font-size:14px; padding:15px 0; margin-right:0 !important;}
  1432. }
  1433. @media only screen and (max-width: 420px) {
  1434. #dealers .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1435. #dealers .container{ margin:0 auto 20px auto;}
  1436. #dealers .container>.content .tag>.tagcon tr:first-of-type td{ width:80px;}
  1437. #dealers .container>.feedback .item a{ margin-left:0px !important; height:30px; line-height:30px; padding:0 5px; font-size:14px;}
  1438. #dealers .container>.feedback .item>.tit{ height:50px; line-height:50px; width:25%;}
  1439. #dealers .container>.feedback .item>.sel{ padding-left:1.6%; width:70%;height:50px; line-height:50px;}
  1440. #dealers .container>.feedback .item>.inputtext{height:50px; line-height:50px; width:70%;}
  1441. #dealers .container>.feedback .item img{position:absolute; left:auto; right:20px; top:12px;}
  1442. #dealers .btn>input{ width:100%;}
  1443. }
  1444. /* end*/
  1445. /*
  1446. network
  1447. -----------------------------------------------------------------*/
  1448. #network{ position:relative; width:100%; margin:0px auto;}
  1449. #network .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1450. #network .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1451. #network .container{ margin:50px auto 150px auto; position:relative; overflow:hidden;}
  1452. #network #map{ width:100%; height:700px;}
  1453. #network .dealer{ position:absolute; z-index:999; top:6%; right:3%; width:270px;height:80%; padding:20px; background:rgba(255,255,255,.9);}
  1454. #network .dealer>.item{ width:80%; margin:0 auto; padding:20px 0; border-bottom:1px dotted #ddd; cursor:pointer; text-align:left;}
  1455. #network .dealer>.item h3{ font-size:18px; font-weight:normal; color:#333; transition:all .35s;}
  1456. #network .dealer>.item p{ padding:10px 0; color:#888; font-size:14px;}
  1457. #network .dealer>.item:hover h3{ color:#d82128;}
  1458. #network .info {border: solid 1px silver;padding:18px 20px; background:#FFF;}
  1459. #network div.info-top {position: relative;background: none repeat scroll 0 0;}
  1460. #network div.info-top div { display: inline-block;color: #222;font-size: 16px;font-weight: bold;padding:5px 0 10px 0;;}
  1461. #network div.info-top img { position: absolute;top: 0;right: 0;transition-duration: 0.35s;}
  1462. #network div.info-top img:hover { box-shadow: 0px 0px 5px #000;}
  1463. #network div.info-top-tit {position: relative;background: none repeat scroll 0 0;border-bottom: 2px solid #555; text-align:left;}
  1464. #network div.info-top-tit div { display: inline-block;color: #222;font-size: 16px;font-weight: bold;padding:5px 0 10px 0;text-align:left;}
  1465. #network div.info-top-tit img { position: absolute;top: 0;right: 0;transition-duration: 0.35s;}
  1466. #network div.info-top-tit img:hover { box-shadow: 0px 0px 5px #000;}
  1467. #network div.info-middle {font-size: 13px;padding:10px 0;line-height: 20px;color:#333; text-align:left}
  1468. #network div.info-middle>.info-img{ width:20%; float:left;}
  1469. #network div.info-middle>.info-img img{width:100%; height:auto;}
  1470. #network div.info-middle>.info-text{ float:right; text-align:left; width:75%;}
  1471. #network div.info-middle>.info-text .tel{ display:inline-block; line-height:30px;font-size:20px; font-weight:bold; color:#d82128; padding:0; margin:0;}
  1472. #network div.info-bottom { height: 0px; width: 100%; clear: both; text-align: center;}
  1473. #network div.info-bottom img {position: relative;z-index: 104; margin-top:18px;}
  1474. #network span {margin-left: 5px; font-size: 11px;}
  1475. @media only screen and (max-width: 1280px) {
  1476. #network #map{ width:100%; height:400px;}
  1477. #network .dealer{ position:relative; z-index:99; right:0; top:0; width:99.6%; margin:10px auto; padding:0 !important;; background:#fff;border:1px solid #ddd;}
  1478. #network .dealer>.item{ width:40%; height:120px; float:left; margin-left:-1px; padding:5% !important; border-bottom:1px dotted #d4d4d4; border-right:1px dotted #d4d4d4;}
  1479. #network .dealer>.item:nth-child(2n){ border-right:0 !important;}
  1480. }
  1481. @media only screen and (max-width: 420px) {
  1482. #network .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1483. #network .container{ margin:0 auto 50px auto;}
  1484. #network #map{ display:none;}
  1485. #network .dealer{ width:99.5%;}
  1486. #network .dealer>.item{ width:90%; border-right:0 !important; float:none!important; height:auto;}
  1487. #network .dealer>.item:last-of-type{ border-bottom:0 !important;}
  1488. #network .dealer>.item h3{ font-size:14px;}
  1489. #network .dealer>.item p{font-size:12px;}
  1490. }
  1491. /* end*/
  1492. /*
  1493. question
  1494. -----------------------------------------------------------------*/
  1495. #question{ position:relative; width:100%; margin:0px auto;}
  1496. #question .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1497. #question .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1498. #question .wrap>.container{ margin:50px auto 150px auto; position:relative; overflow:hidden; background:#fff;border:1px solid #ddd;}
  1499. #question .content{ width:70%; text-align:left; border-right:1px solid #ddd;}
  1500. #question .content>ul{ width:100%; margin:0px auto;}
  1501. #question .content>ul>li{ width:27.2%; height:240px; float:left; padding:5% 3%; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}
  1502. #question .content>ul>li .title{ padding:10px 0; text-align:left; font-size:20px; color:#333;}
  1503. #question .content>ul>li .list{ padding:10px 0;}
  1504. #question .content>ul>li .list>a{ display:block; padding:5px 0; font-size:14px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
  1505. #question .content>ul>li:nth-child(3n){ border-right:0!important;}
  1506. #question .feedback{ width:23%; padding:2% 3%;}
  1507. #question .feedback>.title{ padding:30px 0; text-align:left; font-size:20px; color:#d82128;}
  1508. #question .feedback>.title>span{position:relative; display:inline-block; float:left; width:64px; height:27px; overflow:hidden;}
  1509. #question .feedback>.title>span>img{position:absolute; z-index:1; top:-16px; left:0; width:100%;height:auto;}
  1510. #question .feedback>form{ margin:0px auto; text-align:left;}
  1511. #question .feedback>form>dl{ position:relative; width:100%; margin:0px auto;}
  1512. #question .feedback>form>dl dt {width:50px;line-height: 25px; font-size:14px; color:#666;}
  1513. #question .feedback>form>dl dt, #question .feedback>form>dl dd {padding: 5px 0;}
  1514. #question .feedback>form>dl dd {padding-left: 50px;margin-top: -34px;line-height: 30px;}
  1515. #question .feedback>form>dl input {width:92%;height:35px;line-height:35px; border: solid 1px #ddd;color: #666; outline:none; padding:0 4%; font-family:"微软雅黑";font-size:14px;}
  1516. #question .feedback>form>dl input::-webkit-input-placeholder{ color:#d82128;}
  1517. #question .feedback>form>dl .tips{position: absolute;z-index: 9;}
  1518. #question .feedback>form>dl .error {top: 10px;left:70px;color: #d82128;font-size: 14px;}
  1519. #question .feedback>form>dl #checksn{ width:40%; margin-right:10px;}
  1520. #question .feedback>form>dl textarea {width: 92%;height:80px; padding:4%; border: solid 1px #ddd;color: #666; outline:none; overflow: auto;font-family:"微软雅黑";font-size:14px;}
  1521. #question .feedback>form>dl textarea::-webkit-input-placeholder{ color:#d82128;}
  1522. #question .feedback .auto-tip{background:#fff;}
  1523. #question .feedback .auto-tip li{width:92%; padding:3px 4%;font-size:14px; color:#666;}
  1524. #question .feedback .auto-tip li.hoverBg{background:#eee;cursor:pointer;}
  1525. #question .feedback .current{ color:#ff9900;}
  1526. #question .feedback .hidden {display:none;}
  1527. #question .feedback .btn{ padding:20px 0 30px 0; text-align:center;}
  1528. #question .feedback .btn>input{ width:100%; background:#d82128; border:0!important; font-family:'微软雅黑'; color:#fff; font-size:16px; padding:8px 0; cursor:pointer;}
  1529. #question-view{ position:relative; width:100%; height:100%; margin:0 auto; background:#fff;}
  1530. #question-view .text{ width:80%; margin:0 auto; text-align:left; font-size:14px; line-height:24px;color:#666; padding:30px 0 80px 0;}
  1531. #question-view .text>p{ margin-bottom:10px;}
  1532. #question-view .url{ position:fixed; left:0; bottom:0; width:100%; background:#fff; height:100px;}
  1533. #question-view .url>.wrap{ width:80%; margin:20px auto 0 auto; height:50px; line-height:50px; background:#fff; border:1px solid #ddd;}
  1534. #question-view .url a{ margin-left:10px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; width:40%; font-size:14px; color:#999; display:inline-block; float:left;}
  1535. #question-view .url a:last-of-type{ margin-right:10px; float:right;}
  1536. #question-view .url img{ margin-right:5px; height:25px; width:auto;}
  1537. @media only screen and (max-width: 1280px) {
  1538. #question .content{ float:none!important; width:100%;}
  1539. #question .content>ul>li{ width:94%; height:auto; float:none!important; border-right:0 !important;}
  1540. #question .feedback{ float:none!important; width:90%; padding:2% 5%;}
  1541. }
  1542. @media only screen and (max-width: 420px) {
  1543. #question .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1544. #question .wrap>.container{ margin:0 auto 50px auto;}
  1545. #question .content>ul>li{ width:90%;padding:5%;}
  1546. #question .content>ul>li .title{ font-size:16px;}
  1547. #question .feedback>.title{ font-size:16px;}
  1548. #question .feedback>.title>span{width:47px; height:20px;}
  1549. #question .feedback>.title>span>img{top:-10px;}
  1550. }
  1551. /* end*/
  1552. /*
  1553. download
  1554. -----------------------------------------------------------------*/
  1555. #download{ position:relative; width:100%; margin:0px auto;}
  1556. #download .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1557. #download .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1558. #download .container{ margin:0 auto; padding:50px 0 150px 0; position:relative; overflow:hidden;}
  1559. #download .list-tr{ width:100%; margin:0px auto; background:#666;}
  1560. #download .list-tr>li{ position:relative; display:block; float:left; width:25%; height:60px; line-height:60px; color:#fff; font-size:16px; text-align:center;}
  1561. #download .list-tr>li:after{position:absolute; z-index:9; top:0; right:0; width:1px; height:100%; background:rgba(255,255,255,.5); content:'';}
  1562. #download .list-tr>li:last-of-type:after{ display:none;}
  1563. #download .list-td{ position:relative; width:100%; margin:0px auto; background:#fff;}
  1564. #download .list-td>li{ position:relative; display:block; float:left; width:25%; height:50px; line-height:50px; border-bottom:1px solid #ddd; color:#666; font-size:14px; text-align:center;}
  1565. #download .list-td>li:after{position:absolute; z-index:9; top:0; right:0; width:1px; height:100%; background:#ddd; content:'';}
  1566. #download .list-td:before{position:absolute; z-index:9; top:0; left:0; width:1px; height:100%; background:#ddd; content:'';}
  1567. @media only screen and (max-width: 420px) {
  1568. #download .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1569. #download .container{ padding:0 0 50px 0!important;}
  1570. #download .list-tr>li{ font-size:14px;}
  1571. #download .list-tr>li:first-of-type{ width:70%;}
  1572. #download .list-tr>li:last-of-type{ width:30%;}
  1573. #download .list-tr>li:nth-child(2),#download .list-tr>li:nth-child(3){ display:none!important;}
  1574. #download .list-td>li:nth-child(2),#download .list-td>li:nth-child(3){ display:none!important;}
  1575. #download .list-td>li:first-of-type{ width:70%;}
  1576. #download .list-td>li:last-of-type{ width:30%;}
  1577. }
  1578. /* end*/
  1579. /*
  1580. supplier
  1581. -----------------------------------------------------------------*/
  1582. #supplier{ position:relative; width:100%; margin:0px auto;}
  1583. #supplier .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1584. #supplier .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1585. #supplier .container{ position:relative; margin:50px auto 150px auto;}
  1586. #supplier .container>.img{ width: 42%;height: 100%;position: absolute; top: 0; left: 0; background:url("../image/supplier-img.jpg") no-repeat;background-position: center;background-size: cover;}
  1587. #supplier .container>.content{width: 58%;margin-left: 45%; text-align:left;}
  1588. #supplier .container>.content .text{ padding:10px 0; font-size:16px; color:#666; line-height:30px;}
  1589. #supplier .container>.content .text>h3{ display:block; padding:5px 0; font-size:18px; color:#d82128;}
  1590. #supplier .container>.content .text>h3 strong{font-size:25px;}
  1591. #supplier .container>.content .item{ position:relative; border:1px solid #ddd; overflow:hidden; margin-top:-1px;}
  1592. #supplier .container>.content .item>.tit{ height:65px; line-height:65px; float:left; width:14.8%; text-align:center; border-right:1px solid #ddd; background:#f9f9f9; font-size:14px;}
  1593. #supplier .container>.content .item>.sel{ width:85%; background:#fff; float:left;height:65px; line-height:65px;}
  1594. #supplier .container>.content .item a{ display:inline-block; margin-left:20px; height:30px; line-height:30px; padding:0 20px; font-size:14px;}
  1595. #supplier .container>.content .item .radioA{ background:#d82128; color:#fff;}
  1596. #supplier .container>.content .item>.inputtext{height:65px; line-height:65px; outline:none; border:0 !important; font-family:'微软雅黑'; padding:0 2%; width:81%; float:left;}
  1597. #supplier .container>.content .item>.inputtext:hover -webkit-input-placeholder{ display:none;}
  1598. #supplier .container>.content .item .A::-webkit-input-placeholder{ color:#d82128 !important;}
  1599. #supplier .container>.content .item img{position:absolute; left:300px; top:20px;}
  1600. #supplier .btn{ padding:20px 0 30px 0; text-align:center;}
  1601. #supplier .btn>input{ width:200px; margin:0 auto; outline:none; background:#d82128; border:0!important; font-family:'微软雅黑'; color:#fff; font-size:16px; padding:12px 0; cursor:pointer;}
  1602. @media only screen and (max-width: 780px) {
  1603. #supplier .container>.img{ float:none!important; position:relative; width: 100%;height: 200px!important;}
  1604. #supplier .container>.content{ float:none!important; width: 100%;margin-left: 0%;}
  1605. #supplier .btn>input{ width:100%;}
  1606. }
  1607. @media only screen and (max-width: 420px) {
  1608. #supplier .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1609. #supplier .container{ position:relative; margin:0 auto 20px auto;}
  1610. #supplier .container>.content .text{ font-size:12px;line-height:20px;}
  1611. #supplier .container>.content .text>h3{ font-size:16px;}
  1612. #supplier .container>.content .text>h3 strong{font-size:20px;}
  1613. #supplier .container>.content .item a{ margin-left:0px !important; height:30px; line-height:30px; padding:0 5px; font-size:14px;}
  1614. #supplier .container>.content .item>.tit{ height:50px; line-height:50px; width:25%;}
  1615. #supplier .container>.content .item>.sel{ padding-left:1.6%; width:73%;height:50px; line-height:50px;}
  1616. #supplier .container>.content .item>.inputtext{height:50px; line-height:50px; width:70%;}
  1617. #supplier .container>.content .item img{position:absolute; left:auto; right:20px; top:12px;}
  1618. }
  1619. /* end*/
  1620. /*
  1621. contact
  1622. -----------------------------------------------------------------*/
  1623. #contact{ position:relative; width:100%; margin:0px auto;}
  1624. #contact .wrap{ width:90%;max-width:1460px; margin:0px auto;}
  1625. #contact .wrap>.title{ position:relative; text-align:left; padding:50px 0; font-size:24px; color:#333;}
  1626. #contact .wrap>.container{ margin:0 auto; padding:50px 0 150px 0; position:relative; overflow:hidden;}
  1627. #contact .wrap>.container .content{ width:30%; height:500px; background:#fff;}
  1628. #contact .wrap>.container .content>.item{ position:relative; width:76%; margin:10px auto; padding:30px 0; border-bottom:1px solid #ddd;}
  1629. #contact .wrap>.container .content>.item:last-of-type{ border-bottom:0!important;}
  1630. #contact .wrap>.container .content>.item>p{display: block; font-size:16px; padding:3px 20px 3px 50px;}
  1631. #contact .wrap>.container .content>.item .icon{position:absolute; left:0; top:38px; width:32px; height:32px;}
  1632. #contact .wrap>.container .content>.item .icon>img{ width:100%;height:auto;}
  1633. #contact .wrap>.container .content>.item .tit{ color:#333;}
  1634. #contact .wrap>.container .content>.item .txt{ color:#888;}
  1635. #contact .wrap>.container .content>.item>p span.tips{ position:relative; display:inline-block; font-size:14px; padding:0 10px; color:#ccc;}
  1636. #contact .wrap>.container .content>.item>p span.icon-tips-voice, #contact .wrap>.container .content>.item>p span.icon-tips-qrcode{ position:absolute; top:2px; right:-10px; display:inline-block; cursor:pointer; width:20px; height:20px; background:url("../image/icon-tips-gray.png") no-repeat center center; background-size:16px auto; transition:all .35s;}
  1637. #contact .wrap>.container .content>.item>p span.icon-tips-voice:hover, #contact .wrap>.container .content>.item>p span.icon-tips-qrcode:hover{ background:url("../image/icon-tips-highlight.png") no-repeat center center;background-size:16px auto;}
  1638. #contact .wrap>.container .content>.item .tip-voice{ display:none; position:absolute; z-index:9; top:50%; left:122px; text-align:left; width:140px; height:100px; margin-top:-60px; border:4px solid #d82128; background:#fff; padding:10px; color:#d82128;font-size:12px; line-height:21px; }
  1639. #contact .wrap>.container .content>.item .tip-voice:after{ position:absolute; z-index:1; left:-12px; top:50%; margin-top:-8px; width:0;height:0;border-top: 8px solid transparent;border-right: 12px solid #d82128; border-bottom: 8px solid transparent; content:'';}
  1640. #contact .wrap>.container .content>.item .tip-qrcode{ display:none; position:absolute; z-index:9; top:50%; left:110px; margin-top:-75px; width:150px; height:150px; text-align:left; border:4px solid #d82128;}
  1641. #contact .wrap>.container .content>.item .tip-qrcode>img{ width:100%; height:auto;}
  1642. #contact .wrap>.container .content>.item .tip-qrcode:after{ position:absolute; z-index:1; left:-12px; top:50%; margin-top:-8px; width:0;height:0;border-top: 8px solid transparent;border-right: 12px solid #d82128; border-bottom: 8px solid transparent; content:'';}
  1643. #contact .wrap>.container .map{ width:69%;}
  1644. @media only screen and (max-width: 780px) {
  1645. #contact .wrap>.container{ padding:50px 0;}
  1646. #contact .wrap>.container .content{ width:100%; height:500px;}
  1647. #contact .wrap>.container .content>.item{ width:86%;}
  1648. #contact .wrap>.container .map{ width:100%;}
  1649. }
  1650. @media only screen and (max-width: 420px) {
  1651. #contact .wrap>.title{ padding:30px 0; font-size:16px;font-weight:bold;}
  1652. #contact .wrap>.container{ padding:0 0 50px 0!important;}
  1653. #contact .wrap>.container .content>.item>p{font-size:14px;}
  1654. }
  1655. /* end*/
  1656. /*
  1657. navpart
  1658. -----------------------------------------------------------------*/
  1659. #navpart{ position:relative; width:100%; height:60px; line-height:60px; padding:5px 0; background:#fff; margin:0px auto; border-bottom:1px solid #ddd;}
  1660. #navpart>ul{ display:block; margin:0px auto; width:90%; max-width:1460px; text-align:center;}
  1661. #navpart>ul>li{ display:inline-block;}
  1662. #navpart>ul>li>a{ display:block; padding:0 40px; font-size:16px; text-align:center;}
  1663. #navpart li.A a{ color:#d82128;}
  1664. #navpart .bar {position: absolute;left:0;bottom:-2px; background: #d82128;height: 2px;width: 60px;}
  1665. @media only screen and (max-width: 680px) {
  1666. #navpart{ display:none;}
  1667. }
  1668. /* end*/
  1669. /*
  1670. push
  1671. -----------------------------------------------------------------*/
  1672. #push{display:block; background:#fff url("http://www.gwsoft.com.cn/images/bt-bg.png") repeat-x left bottom;border:1px solid #ddd; border-radius:2px; font-size:14px; padding:0; line-height:45px; color:#666; width:160px; margin:30px auto 0 auto; transition:all .35s;}
  1673. #push>span{ position:relative; display:inline-block; float:left; margin:12px 0 0 20px; width:24px; height:24px; overflow:hidden;}
  1674. #push>span>img{ position:absolute; z-index:1; left:0; top:0; width:100%; height:auto;}
  1675. #push:hover{ background:#fff url("") repeat-x left bottom; ; color:#d82128; text-decoration:none;transform:translate(0,-5px);}
  1676. #push:hover span>img{ top:-24px;}
  1677. @media only screen and (max-width: 640px){
  1678. #push{ width:140px; line-height:35px; font-size:12px;}
  1679. #push>span{ margin:10px 0 0 20px; width:18px; height:18px;}
  1680. #push:hover span>img{ top:-18px;}
  1681. }
  1682. /* end*/
  1683. /*
  1684. quick
  1685. -----------------------------------------------------------------*/
  1686. #quick{ display:none; position:fixed; z-index:99; right:0px; top:30%; background:rgba(26,125,226,0.5); width:130px; height:110px; overflow:hidden; transition:all .35s; width: 130px ! important;}
  1687. #quick .btn{ position:relative; text-align:right; padding:20px 15px; font-size:12px; color:#fff; line-height:20px; cursor:pointer;}
  1688. #quick .btn img{ position:absolute; right:90px; top:50px; width:20px; height:auto;animation: aniLeftright 1.5s infinite;}
  1689. #quick .btn .A{right:100px; transform: rotate(90deg);animation: aniTondown 1.5s infinite;}
  1690. #quick .container{ display:none; width:90%; margin:0px auto;}
  1691. #quick .container a{ display:block; width:99.5%; height:auto; padding:13px 0px; font-size:12px; color:#fff; border:1px solid rgba(255,255,255,.2); margin-top:-1px; margin-left:-1px; transition:all .35s;}
  1692. #quick .container a img{ display:block; width:100px; margin:0px auto; transition:all .35s;}
  1693. #quick .container a:hover{ background:rgba(255,255,255,.05);}
  1694. #quick .container a:hover img{ transform:scale(1.2);}
  1695. #quick .container .worktime{ color:rgba(255,255,255,.8); text-align:center; padding:10px 0;}
  1696. #quick:hover{ background:rgba(26,125,226,0.5);}
  1697. @media only screen and (max-width: 900px){
  1698. #quick{ right:-130px;}
  1699. }
  1700. @keyframes aniLeftright {
  1701. 0% {right:90px;}
  1702. 50% {right:95px;}
  1703. 100% {right:90px;}
  1704. }
  1705. @keyframes aniTondown {
  1706. 0% {top:50px;}
  1707. 50% {top:55px;}
  1708. 100% {top:50px;}
  1709. }
  1710. /* end*/
  1711. /*
  1712. foot
  1713. -----------------------------------------------------------------*/
  1714. #foot { width: 100%; height: auto; position: relative; overflow: hidden; margin: 0px auto; background:#eaeaea;}
  1715. #foot .wrap{ width:90%; max-width:1460px; margin:0px auto; padding:1px 0px;}
  1716. #foot .contact{ position:relative; width:1200px; padding-right:90px; margin-left: 122px;}
  1717. #foot .contact .title{ font-size:20px;font-weight:bold; color:#fff;}
  1718. #foot .contact .title img{ height:55px; width:auto; margin-right:5px;}
  1719. #foot .contact .text{ padding:16px 0; text-align:left;}
  1720. #foot .contact .text h3{ display:block; padding-bottom:8px; color:rgba(255,255,255,.7); font-size:16px;font-weight:normal;}
  1721. #foot .contact .text p{ position:relative; padding:2px 0; color:rgba(255,255,255,.7); font-size:14px;}
  1722. #foot .contact .text span.txt{ display:inline-block; padding:0 10px; color:rgba(255,255,255,.3);}
  1723. #foot .contact .text span.icon-tips{ position:absolute; top:3px; right:2px; display:inline-block; cursor:pointer; width:20px; height:20px; background:url("http://www.gwsoft.com.cn/images/icon-tips.png") no-repeat center center; background-size:16px auto; transition:all .35s;}
  1724. #foot .contact .text span.icon-tips:hover{ background:url("../image/icon-tips-highlight.png") no-repeat center center;background-size:16px auto;}
  1725. #foot .contact .tips{ display:none; position:absolute; z-index:9; top:-6px; right:-50px; width:118px; height:150px; padding:10px 0px 0px 22px; color:#d82128;font-size:12px; line-height:21px; background:url("http://www.gwsoft.com.cn/images/tips-bg.png") no-repeat; background-position:0 0;}
  1726. #foot .share{ width:300px; padding:40px 0; text-align:left;}
  1727. #foot .share .bshare-custom a{ padding:0px; margin:0px 3px; width:34px; height:34px; border-radius:100%; transition:all .35s; display:inline-block;}
  1728. #foot .share .bshare-custom .bshare-sinaminiblog{ background:#444 url("../image/icon-weibo.png") no-repeat; background-size:20px auto;background-position:center center;}
  1729. #foot .share .bshare-custom .bshare-qqim{ background:#444 url("../image/icon-qq.png") no-repeat; background-size:20px auto;background-position:center center;}
  1730. #foot .share .bshare-custom .bshare-weixin{ background:#444 url("../image/icon-wechat.png") no-repeat; background-size:20px auto;background-position:center center;}
  1731. #foot .share .bshare-more{ display:none !important;}
  1732. #foot .share .text{ padding:15px 5px; color:rgba(255,255,255,.8);}
  1733. #foot .share .bbs{ padding:20px 0;}
  1734. #foot .share .bbs a{ background:#444; border-radius:30px; font-size:13px; padding:8px 15px; color:#fff; transition:all .35s;}
  1735. #foot .share .bbs a img{ height:18px; width:auto; margin-right:5px;}
  1736. #foot .share .bbs a:hover{ opacity:.8;}
  1737. #foot .qrcode{ width:500px; text-align:right;}
  1738. #foot .qrcode p{ display:inline-block; color:rgba(255,255,255,.8); margin-bottom:10px; margin-left:15px; font-size:14px; color:rgba(255,255,255,.5); text-align:center;}
  1739. #foot .qrcode p>img{ display:block; width:170px; height:auto; margin-bottom:10px;}
  1740. @media only screen and (max-width: 1280px) {
  1741. #foot .contact{ width:135%; padding-right:0px !important;float:none!important; margin-left: 10px;}
  1742. #foot .share{ display:block; width:100%; float:none!important;}
  1743. #foot .qrcode{ position:absolute; z-index:1; right:5%; top:60px; width:50%;}
  1744. #foot .qrcode p>img{ width:140px;}
  1745. }
  1746. @media only screen and (max-width: 680px) {
  1747. #foot .qrcode p>img{ width:120px;}
  1748. }
  1749. @media only screen and (max-width: 420px) {
  1750. #foot .contact .text p{font-size:12px;}
  1751. #foot .share{ width:100%; padding:20px 0;}
  1752. #foot .qrcode{ position:relative; right:auto; top:0; width:100%; text-align:left;margin-left:0px; margin-right:15px;}
  1753. }
  1754. /* end*/
  1755. /*
  1756. copyright
  1757. -----------------------------------------------------------------*/
  1758. #copyright{ width:100%; background:#eaeaea; margin:-15px auto;}
  1759. #copyright .wrap{ width:90%; max-width:1460px; margin:0px auto; padding:15px 0px; overflow:hidden;}
  1760. #copyright .text{ width:90%; text-align:center; color:rgba(0,0,0,0.7); font-size:13px;}
  1761. #copyright .url{ width:30%; text-align:right; color:#666;}
  1762. #copyright a{color:rgba(0,0,0,0.7);}
  1763. #copyright a:hover{color:#d90000;}
  1764. @media only screen and (max-width: 420px) {
  1765. #copyright .text{ width:100%; float:none!important; font-size:12px;}
  1766. #copyright .url{ width:100%; float:none!important; text-align:left;}
  1767. }
  1768. /* end*/
  1769. @keyframes pin-pulse {
  1770. 0% {
  1771. -webkit-transform: scale(1);
  1772. -moz-transform: scale(1);
  1773. -ms-transform: scale(1);
  1774. -o-transform: scale(1);
  1775. transform: scale(1);
  1776. opacity: 0.8;
  1777. filter: alpha(opacity=80);
  1778. }
  1779. 50% {
  1780. opacity: 0.8;
  1781. filter: alpha(opacity=80);
  1782. }
  1783. 100% {
  1784. -webkit-transform: scale(1.6);
  1785. -moz-transform: scale(1.6);
  1786. -ms-transform: scale(1.6);
  1787. -o-transform: scale(1.6);
  1788. transform: scale(1.6);
  1789. opacity: 0;
  1790. filter: alpha(opacity=0);
  1791. }
  1792. }