style.css 200 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123
  1. /*-----------------------------------------------------------------------------------
  2. CSS INDEX
  3. ===================
  4. 01. Common
  5. 02. Header
  6. 03. Banner
  7. 04. About
  8. 05. Sidebar
  9. 06. Footer
  10. 07. Solution
  11. 08. Core Product
  12. 09. About Two
  13. 10. Classic Case
  14. 11. Sub Company
  15. 12. Custom Contact
  16. 13. News Breadcrumb
  17. 14. News Content
  18. 15. Custom Banner
  19. 16. Common breadcrumb
  20. 17. Product Grid
  21. 18. Product Detial
  22. 19. Solution Page
  23. 20. Join
  24. 21. Example Page
  25. 22. About Page
  26. 23. About Page -- Credential
  27. 24. About Page -- Investor Relations
  28. 25. About Page -- Organizational Structure
  29. 26. About Page -- History
  30. 27. About Page -- Sub Company
  31. 28. Service page
  32. 29. Technology page
  33. -----------------------------------------------------------------------------------*/
  34. /*===========================
  35. COMMON CSS
  36. ===========================*/
  37. @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap");
  38. body {
  39. /* font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu; */
  40. font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei";
  41. font-weight: normal;
  42. font-style: normal;
  43. color: #333;
  44. overflow-x: hidden;
  45. font-size: 16px;
  46. line-height: 1.6;
  47. -webkit-font-smoothing: antialiased;
  48. }
  49. .cannot_selected {
  50. -moz-user-select: none;
  51. /*火狐*/
  52. -webkit-user-select: none;
  53. /*webkit浏览器*/
  54. -ms-user-select: none;
  55. /*IE10*/
  56. -khtml-user-select: none;
  57. /*早期浏览器*/
  58. user-select: none;
  59. }
  60. .text_nowrap {
  61. overflow: hidden;
  62. text-overflow: ellipsis;
  63. white-space: nowrap;
  64. }
  65. * {
  66. margin: 0;
  67. padding: 0;
  68. -webkit-box-sizing: border-box;
  69. box-sizing: border-box;
  70. }
  71. img {
  72. max-width: 100%;
  73. -webkit-transition: all 0.4s ease-out 0s;
  74. transition: all 0.4s ease-out 0s;
  75. }
  76. a:focus,
  77. input:focus,
  78. textarea:focus,
  79. button:focus,
  80. .slick-initialized .slick-slide:focus,
  81. .btn:focus {
  82. text-decoration: none;
  83. outline: none;
  84. -webkit-box-shadow: none;
  85. box-shadow: none;
  86. }
  87. a:focus,
  88. a:hover {
  89. text-decoration: none;
  90. }
  91. i,
  92. span,
  93. a {
  94. display: inline-block;
  95. }
  96. h1,
  97. h2,
  98. h3,
  99. h4,
  100. h5,
  101. h6 {
  102. /* font-family: "Oswald", sans-serif; */
  103. font-weight: 700;
  104. margin: 0px;
  105. }
  106. h1,
  107. h1 a,
  108. h2,
  109. h2 a,
  110. h3,
  111. h3 a,
  112. h4,
  113. h4 a,
  114. h5,
  115. h5 a,
  116. h6,
  117. h6 a {
  118. color: #041d38;
  119. }
  120. h1 {
  121. font-size: 48px;
  122. }
  123. h2 {
  124. font-size: 36px;
  125. }
  126. h3 {
  127. font-size: 28px;
  128. }
  129. h4 {
  130. font-size: 24px;
  131. }
  132. h5 {
  133. font-size: 18px;
  134. }
  135. h6 {
  136. font-size: 16px;
  137. }
  138. ul,
  139. ol {
  140. margin: 0px;
  141. padding: 0px;
  142. list-style-type: none;
  143. }
  144. p {
  145. margin: 0px;
  146. }
  147. a {
  148. /* -webkit-transition: all 0.3s ease-out 0s;
  149. transition: all 0.3s ease-out 0s; */
  150. }
  151. a,
  152. a:hover {
  153. color: #639BFF;
  154. }
  155. input,
  156. select,
  157. textarea {
  158. width: 100%;
  159. height: 50px;
  160. border: 2px solid #ededed;
  161. font-size: 14px;
  162. font-weight: 600;
  163. font-family: "Oswald", sans-serif;
  164. color: #041d38;
  165. text-transform: uppercase;
  166. padding: 0 30px;
  167. }
  168. textarea {
  169. padding-top: 20px;
  170. height: 120px;
  171. }
  172. .input-group {
  173. position: relative;
  174. }
  175. .input-group input,
  176. .input-group textarea {
  177. padding-left: 65px;
  178. }
  179. .input-group .icon {
  180. position: absolute;
  181. left: 30px;
  182. top: 50%;
  183. -webkit-transform: translateY(-50%);
  184. transform: translateY(-50%);
  185. color: #639BFF;
  186. }
  187. .input-group.textarea .icon {
  188. top: 20px;
  189. -webkit-transform: translateY(0);
  190. transform: translateY(0);
  191. }
  192. ::-webkit-input-placeholder {
  193. opacity: 1;
  194. }
  195. :-ms-input-placeholder {
  196. opacity: 1;
  197. }
  198. ::-ms-input-placeholder {
  199. opacity: 1;
  200. }
  201. ::placeholder {
  202. opacity: 1;
  203. }
  204. /*===== Common class Style =====*/
  205. .blue_fc1 {
  206. color: #2a2e78
  207. }
  208. #preloader {
  209. position: fixed;
  210. width: 100%;
  211. height: 100%;
  212. top: 0px;
  213. left: 0px;
  214. background-color: #639BFF;
  215. z-index: 9999999;
  216. }
  217. #preloader>div {
  218. display: -webkit-box;
  219. display: -ms-flexbox;
  220. display: flex;
  221. -webkit-box-pack: center;
  222. -ms-flex-pack: center;
  223. justify-content: center;
  224. -webkit-box-align: center;
  225. -ms-flex-align: center;
  226. align-items: center;
  227. height: 100%;
  228. width: 100%;
  229. }
  230. #preloader>div div {
  231. height: 40px;
  232. width: 40px;
  233. background-color: #fff;
  234. -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  235. animation: rotateplane 1.2s infinite ease-in-out;
  236. }
  237. .main-btn {
  238. font-size: 16px;
  239. font-weight: 400;
  240. font-family: "Oswald", sans-serif;
  241. color: #666666;
  242. text-transform: uppercase;
  243. -webkit-transition: all 0.3s ease-out 0s;
  244. transition: all 0.3s ease-out 0s;
  245. padding: 15px 50px;
  246. background-color: #f0f0f0;
  247. opacity: 1;
  248. position: relative;
  249. border-radius: 28px
  250. }
  251. .main-btn::before {
  252. width: 10px;
  253. height: 2px;
  254. }
  255. .main-btn:hover {
  256. color: #666666;
  257. opacity: .7
  258. }
  259. .main-btn.btn-borderd {
  260. border: 2px solid rgba(4, 29, 56, 0.1);
  261. background-color: transparent;
  262. }
  263. .main-btn.btn-borderd:hover {
  264. background-color: #639BFF;
  265. border-color: #639BFF;
  266. }
  267. .main-btn.btn-borderd:hover::after,
  268. .main-btn.btn-borderd:hover::before {
  269. background-color: #041d38;
  270. }
  271. /* .main-btn.btn-filled {
  272. background-color: #639BFF;
  273. border-color: #639BFF;
  274. } */
  275. .main-btn.btn-filled::after,
  276. .main-btn.btn-filled::before {
  277. background-color: #041d38;
  278. }
  279. .main-btn.btn-filled:hover {
  280. background-color: transparent;
  281. border-color: rgba(4, 29, 56, 0.1);
  282. }
  283. .main-btn.btn-filled:hover::after,
  284. .main-btn.btn-filled:hover::before {
  285. background-color: rgba(4, 29, 56, 0.1);
  286. }
  287. .section-title h2 {
  288. font-size: 48px;
  289. text-transform: uppercase;
  290. line-height: 1.2;
  291. letter-spacing: -1px;
  292. }
  293. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  294. .section-title h2 {
  295. font-size: 38px;
  296. }
  297. }
  298. @media only screen and (min-width: 768px) and (max-width: 991px) {
  299. .section-title h2 {
  300. font-size: 40px;
  301. }
  302. }
  303. @media only screen and (min-width: 576px) and (max-width: 767px) {
  304. .section-title h2 {
  305. font-size: 40px;
  306. }
  307. }
  308. @media (max-width: 575px) {
  309. .section-title h2 {
  310. font-size: 32px;
  311. }
  312. }
  313. @media (max-width: 399px) {
  314. .section-title h2 {
  315. font-size: 26px;
  316. }
  317. }
  318. .section-title span.title-tag {
  319. text-transform: uppercase;
  320. /* font-family: "Oswald", sans-serif; */
  321. line-height: 1;
  322. font-size: 36px;
  323. display: inline-block;
  324. margin-bottom: 20px;
  325. position: relative;
  326. }
  327. .section-title.left-border span.title-tag {
  328. padding-left: 50px;
  329. }
  330. .section-title.left-border span.title-tag::before {
  331. position: absolute;
  332. left: 0;
  333. top: 50%;
  334. -webkit-transform: translateY(-50%);
  335. transform: translateY(-50%);
  336. height: 4px;
  337. width: 30px;
  338. background-color: #2a2e78;
  339. content: '';
  340. }
  341. .section-title.both-border span.title-tag {
  342. padding-left: 50px;
  343. padding-right: 50px;
  344. }
  345. .section-title.both-border span.title-tag::after {
  346. left: auto;
  347. right: 0;
  348. }
  349. /* Custom Container Width */
  350. @media (min-width: 1600px) {
  351. .container-fluid.custom-container-one {
  352. max-width: 1520px;
  353. }
  354. }
  355. @media (min-width: 1600px) {
  356. .container-fluid.custom-container-two {
  357. max-width: 1400px;
  358. }
  359. }
  360. /* Animation keyfranes */
  361. @-webkit-keyframes sticky {
  362. 0% {
  363. top: -200px;
  364. }
  365. 100% {
  366. top: 0;
  367. }
  368. }
  369. @keyframes sticky {
  370. 0% {
  371. top: -200px;
  372. }
  373. 100% {
  374. top: 0;
  375. }
  376. }
  377. @-webkit-keyframes rotateplane {
  378. 0% {
  379. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  380. -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  381. }
  382. 50% {
  383. transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  384. -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  385. }
  386. 100% {
  387. transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  388. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  389. }
  390. }
  391. @keyframes rotateplane {
  392. 0% {
  393. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  394. -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  395. }
  396. 50% {
  397. transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  398. -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  399. }
  400. 100% {
  401. transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  402. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  403. }
  404. }
  405. @-webkit-keyframes hvr-buzz-out {
  406. 10% {
  407. -webkit-transform: translateX(3px) rotate(2deg);
  408. transform: translateX(3px) rotate(2deg);
  409. }
  410. 20% {
  411. -webkit-transform: translateX(-3px) rotate(-2deg);
  412. transform: translateX(-3px) rotate(-2deg);
  413. }
  414. 30% {
  415. -webkit-transform: translateX(3px) rotate(2deg);
  416. transform: translateX(3px) rotate(2deg);
  417. }
  418. 40% {
  419. -webkit-transform: translateX(-3px) rotate(-2deg);
  420. transform: translateX(-3px) rotate(-2deg);
  421. }
  422. 50% {
  423. -webkit-transform: translateX(2px) rotate(1deg);
  424. transform: translateX(2px) rotate(1deg);
  425. }
  426. 60% {
  427. -webkit-transform: translateX(-2px) rotate(-1deg);
  428. transform: translateX(-2px) rotate(-1deg);
  429. }
  430. 70% {
  431. -webkit-transform: translateX(2px) rotate(1deg);
  432. transform: translateX(2px) rotate(1deg);
  433. }
  434. 80% {
  435. -webkit-transform: translateX(-2px) rotate(-1deg);
  436. transform: translateX(-2px) rotate(-1deg);
  437. }
  438. 90% {
  439. -webkit-transform: translateX(1px) rotate(0);
  440. transform: translateX(1px) rotate(0);
  441. }
  442. 100% {
  443. -webkit-transform: translateX(-1px) rotate(0);
  444. transform: translateX(-1px) rotate(0);
  445. }
  446. }
  447. @keyframes hvr-buzz-out {
  448. 10% {
  449. -webkit-transform: translateX(3px) rotate(2deg);
  450. transform: translateX(3px) rotate(2deg);
  451. }
  452. 20% {
  453. -webkit-transform: translateX(-3px) rotate(-2deg);
  454. transform: translateX(-3px) rotate(-2deg);
  455. }
  456. 30% {
  457. -webkit-transform: translateX(3px) rotate(2deg);
  458. transform: translateX(3px) rotate(2deg);
  459. }
  460. 40% {
  461. -webkit-transform: translateX(-3px) rotate(-2deg);
  462. transform: translateX(-3px) rotate(-2deg);
  463. }
  464. 50% {
  465. -webkit-transform: translateX(2px) rotate(1deg);
  466. transform: translateX(2px) rotate(1deg);
  467. }
  468. 60% {
  469. -webkit-transform: translateX(-2px) rotate(-1deg);
  470. transform: translateX(-2px) rotate(-1deg);
  471. }
  472. 70% {
  473. -webkit-transform: translateX(2px) rotate(1deg);
  474. transform: translateX(2px) rotate(1deg);
  475. }
  476. 80% {
  477. -webkit-transform: translateX(-2px) rotate(-1deg);
  478. transform: translateX(-2px) rotate(-1deg);
  479. }
  480. 90% {
  481. -webkit-transform: translateX(1px) rotate(0);
  482. transform: translateX(1px) rotate(0);
  483. }
  484. 100% {
  485. -webkit-transform: translateX(-1px) rotate(0);
  486. transform: translateX(-1px) rotate(0);
  487. }
  488. }
  489. @-webkit-keyframes ripple {
  490. 0%,
  491. 35% {
  492. -webkit-transform: scale(0);
  493. transform: scale(0);
  494. opacity: 1;
  495. }
  496. 50% {
  497. -webkit-transform: scale(1.5);
  498. transform: scale(1.5);
  499. opacity: 0.8;
  500. }
  501. 100% {
  502. opacity: 0;
  503. -webkit-transform: scale(2);
  504. transform: scale(2);
  505. }
  506. }
  507. @keyframes ripple {
  508. 0%,
  509. 35% {
  510. -webkit-transform: scale(0);
  511. transform: scale(0);
  512. opacity: 1;
  513. }
  514. 50% {
  515. -webkit-transform: scale(1.5);
  516. transform: scale(1.5);
  517. opacity: 0.8;
  518. }
  519. 100% {
  520. opacity: 0;
  521. -webkit-transform: scale(2);
  522. transform: scale(2);
  523. }
  524. }
  525. @-webkit-keyframes ripple-white {
  526. 0% {
  527. opacity: 0;
  528. -webkit-transform: scale(1);
  529. transform: scale(1);
  530. }
  531. 40% {
  532. opacity: 0.2;
  533. -webkit-transform: scale(1.2);
  534. transform: scale(1.2);
  535. }
  536. 100% {
  537. opacity: 0;
  538. -webkit-transform: scale(1.4);
  539. transform: scale(1.4);
  540. }
  541. }
  542. @keyframes ripple-white {
  543. 0% {
  544. opacity: 0;
  545. -webkit-transform: scale(1);
  546. transform: scale(1);
  547. }
  548. 40% {
  549. opacity: 0.2;
  550. -webkit-transform: scale(1.2);
  551. transform: scale(1.2);
  552. }
  553. 100% {
  554. opacity: 0;
  555. -webkit-transform: scale(1.4);
  556. transform: scale(1.4);
  557. }
  558. }
  559. /*===========================
  560. Header
  561. ===========================*/
  562. header {
  563. /*===== Header transparent =====*/
  564. /*===== Header to area =====*/
  565. /*===== Main Menu =====*/
  566. /*===== Mobile Menu =====*/
  567. /*===== Header two =====*/
  568. /*===== Header three =====*/
  569. /*===== Sticky Header =====*/
  570. /* off canvas menu */
  571. }
  572. header.header-absolute {
  573. position: absolute;
  574. left: 0;
  575. top: 0;
  576. width: 100%;
  577. z-index: 99;
  578. }
  579. header .header-top-area {
  580. padding: 7px 0;
  581. background: rgba(0, 0, 0, 0.1)
  582. }
  583. @media (max-width: 575px) {
  584. header .header-top-area {
  585. display: none;
  586. }
  587. }
  588. header .header-top-area .contact-list li,
  589. header .header-top-area .social-link li {
  590. display: inline-block;
  591. font-weight: 700;
  592. font-size: 16px;
  593. /* text-transform: uppercase; */
  594. margin-right: 25px;
  595. /* font-family: "Oswald", sans-serif; */
  596. }
  597. header .header-top-area .contact-list li:last-child,
  598. header .header-top-area .social-link li:last-child {
  599. margin-right: 0;
  600. }
  601. header .header-top-area .contact-list li,
  602. header .header-top-area .contact-list li a,
  603. header .header-top-area .social-link li,
  604. header .header-top-area .social-link li a {
  605. color: #fff;
  606. }
  607. header .header-top-area .contact-list li a:hover,
  608. header .header-top-area .social-link li a:hover {
  609. color: #639BFF;
  610. }
  611. header .header-top-area .social-link {
  612. text-align: right;
  613. }
  614. header .header-top-area .social-link li {
  615. margin-right: 0;
  616. margin-left: 25px;
  617. }
  618. header .header-top-area .social-link li:first-child {
  619. margin-left: 0;
  620. }
  621. header .mainmenu-area {
  622. /* border: 1px solid red; */
  623. /* background-color: #fff; */
  624. position: relative;
  625. padding: 0 50px;
  626. }
  627. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  628. header .mainmenu-area {
  629. padding: 0 40px;
  630. }
  631. }
  632. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  633. header .mainmenu-area {
  634. padding: 0 30px;
  635. }
  636. }
  637. @media (max-width: 991px) {
  638. header .mainmenu-area {
  639. padding: 23px;
  640. }
  641. }
  642. @media (max-width: 575px) {
  643. header .mainmenu-area {
  644. background: #000
  645. }
  646. }
  647. header .mainmenu-area .main-menu {
  648. display: -ms-flexbox!important;
  649. display: flex!important;
  650. -ms-flex-pack: start!important;
  651. justify-content: flex-start!important;
  652. -ms-flex-align: center!important;
  653. align-items: center!important;
  654. }
  655. header .mainmenu-area .main-menu .logo img {
  656. max-width: 87px;
  657. }
  658. @media (max-width: 399px) {
  659. header .mainmenu-area .main-menu .logo img {
  660. max-width: 120px;
  661. }
  662. }
  663. header .mainmenu-area .main-menu .menu-items {
  664. margin-left: 60px;
  665. }
  666. header .mainmenu-area .main-menu .menu-items ul:nth-child(1) {
  667. display: flex;
  668. }
  669. header .mainmenu-area .main-menu .menu-items ul li {
  670. display: inline-block;
  671. margin-right: 30px;
  672. position: relative;
  673. }
  674. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  675. header .mainmenu-area .main-menu .menu-items ul li {
  676. margin-right: 15px;
  677. }
  678. }
  679. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  680. header .mainmenu-area .main-menu .menu-items ul li {
  681. margin-right: 0;
  682. }
  683. }
  684. header .mainmenu-area .main-menu .menu-items ul li:last-child {
  685. margin-right: 0;
  686. }
  687. header .mainmenu-area .main-menu .menu-items ul li a {
  688. /* line-height: 74px; */
  689. padding: 24px 30px;
  690. color: #fff;
  691. font-family: "Oswald", sans-serif;
  692. /* font-weight: 500; */
  693. text-transform: uppercase;
  694. font-size: 16px;
  695. }
  696. @media only screen and (min-width: 992px) and (max-width: 1199px) {
  697. header .mainmenu-area .main-menu .menu-items ul li a {
  698. padding: 25px 30px;
  699. }
  700. header .mainmenu-area .main-menu .menu-items ul li .submenu {
  701. left: -34px;
  702. }
  703. }
  704. header .mainmenu-area .main-menu .menu-items ul li:hover a {
  705. color: #639BFF;
  706. }
  707. header .mainmenu-area .main-menu .menu-items ul li.active>a {
  708. color: #639BFF;
  709. font-size: 18px;
  710. font-weight: bold;
  711. }
  712. header .mainmenu-area .main-menu .menu-items ul li.active>a:before {
  713. content: '';
  714. width: 24px;
  715. height: 2px;
  716. display: inline-block;
  717. background-color: #639BFF;
  718. /* margin-right: 5px; */
  719. position: absolute;
  720. bottom: 18px;
  721. left: 50%;
  722. margin-left: -12px;
  723. }
  724. header .mainmenu-area .main-menu .menu-items ul li .submenu {
  725. position: absolute;
  726. left: -48px;
  727. top: 120%;
  728. width: 220px;
  729. background-color: #fff;
  730. opacity: 0;
  731. visibility: hidden;
  732. -webkit-transition: all 0.3s ease-out 0s;
  733. transition: all 0.3s ease-out 0s;
  734. z-index: 99;
  735. box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  736. -webkit-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  737. -moz-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  738. }
  739. header .mainmenu-area .main-menu .menu-items ul li .submenu>li {
  740. position: relative;
  741. display: block;
  742. margin: 0;
  743. text-align: center;
  744. }
  745. header .mainmenu-area .main-menu .menu-items ul li .submenu>li a {
  746. display: block;
  747. padding: 0 15px;
  748. position: relative;
  749. color: #041d38;
  750. -webkit-transition: all 0.3s ease-out 0s;
  751. transition: all 0.3s ease-out 0s;
  752. border-radius: 0;
  753. line-height: 40px;
  754. }
  755. header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover {
  756. background-color: #639BFF;
  757. color: #fff;
  758. }
  759. header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover>a {
  760. color: #fff;
  761. }
  762. header .mainmenu-area .main-menu .menu-items ul li .submenu>li .submenu {
  763. position: absolute;
  764. left: 100%;
  765. top: 30%;
  766. width: 200px;
  767. background-color: #fff;
  768. visibility: hidden;
  769. opacity: 0;
  770. }
  771. header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover .submenu {
  772. opacity: 1;
  773. visibility: visible;
  774. top: 0;
  775. }
  776. header .mainmenu-area .main-menu .menu-items ul li:hover .submenu {
  777. visibility: visible;
  778. opacity: 1;
  779. top: 100%;
  780. }
  781. header .mainmenu-area .main-right {
  782. display: -webkit-box;
  783. display: -ms-flexbox;
  784. display: flex;
  785. -webkit-box-pack: right;
  786. -ms-flex-pack: right;
  787. justify-content: right;
  788. -webkit-box-align: center;
  789. -ms-flex-align: center;
  790. align-items: center;
  791. }
  792. @media (max-width: 575px) {
  793. header .mainmenu-area .main-right {
  794. display: none;
  795. }
  796. }
  797. header .mainmenu-area .main-right .offcanvas-trigger {
  798. margin-left: 20px;
  799. height: 60px;
  800. width: 60px;
  801. line-height: 60px;
  802. background-color: #639BFF;
  803. border: 2px solid #639BFF;
  804. color: #fff;
  805. text-align: center;
  806. -webkit-transition: all 0.3s ease-out 0s;
  807. transition: all 0.3s ease-out 0s;
  808. }
  809. @media (max-width: 767px) {
  810. header .mainmenu-area .main-right .offcanvas-trigger {
  811. display: none;
  812. }
  813. }
  814. header .mainmenu-area .main-right .offcanvas-trigger:hover {
  815. background-color: #041d38;
  816. border-color: #041d38;
  817. }
  818. header .mainmenu-area .main-right .offcanvas-trigger i {
  819. font-size: 30px;
  820. position: relative;
  821. top: 5px;
  822. }
  823. header .mobile-menu.mean-container .mean-bar {
  824. background-color: transparent;
  825. padding: 0;
  826. min-height: 0;
  827. }
  828. header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
  829. margin-right: 15px;
  830. margin-top: -66px;
  831. border: 2px solid rgba(255, 255, 255, 0.8);
  832. padding: 10px 10px;
  833. width: 26px;
  834. z-index: 222;
  835. }
  836. @media (max-width: 399px) {
  837. header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
  838. padding: 12px 10px;
  839. }
  840. }
  841. header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal span {
  842. background-color: rgba(255, 255, 255, 0.8);
  843. }
  844. header .mobile-menu.mean-container .mean-nav {
  845. margin-top: 0;
  846. background-color: #041d38;
  847. position: absolute;
  848. left: 0;
  849. top: 0;
  850. width: 100%;
  851. z-index: 99;
  852. }
  853. header .mobile-menu.mean-container .mean-nav ul li {
  854. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  855. }
  856. header .mobile-menu.mean-container .mean-nav ul li:last-child {
  857. border: none;
  858. }
  859. header .mobile-menu.mean-container .mean-nav ul li a {
  860. border: none;
  861. padding: 0;
  862. padding: 15px 18px;
  863. font-size: 14px;
  864. }
  865. header .mobile-menu.mean-container .mean-nav ul li li:first-child {
  866. border-top: 1px solid rgba(255, 255, 255, 0.2);
  867. }
  868. header .mobile-menu.mean-container .mean-nav ul li li a {
  869. padding: 15px 40px;
  870. }
  871. header .mobile-menu.mean-container .mean-nav ul li li li {
  872. border-top: 1px solid rgba(255, 255, 255, 0.2);
  873. }
  874. header .mobile-menu.mean-container .mean-nav ul li li li a {
  875. padding: 15px 60px;
  876. }
  877. header .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
  878. border: none !important;
  879. width: 50px;
  880. height: 53px;
  881. padding: 0 !important;
  882. line-height: 53px;
  883. margin-top: 0;
  884. }
  885. header .mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover {
  886. background: transparent;
  887. }
  888. header.header-two .header-top-area {
  889. padding: 15px 0;
  890. background-color: #041d38;
  891. }
  892. header.header-two .mainmenu-area {
  893. border-bottom: 1px solid #f1f1f1;
  894. padding: 0;
  895. }
  896. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  897. header.header-two .mainmenu-area {
  898. padding: 0;
  899. }
  900. }
  901. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  902. header.header-two .mainmenu-area {
  903. padding: 0;
  904. }
  905. }
  906. @media only screen and (min-width: 768px) and (max-width: 991px) {
  907. header.header-two .mainmenu-area {
  908. padding: 15px 95px 15px 0;
  909. }
  910. }
  911. @media (max-width: 767px) {
  912. header.header-two .mainmenu-area {
  913. padding: 15px 95px 15px 0;
  914. }
  915. }
  916. @media (max-width: 575px) {
  917. header.header-two .mainmenu-area {
  918. margin-top: 0;
  919. }
  920. }
  921. header.header-two .mainmenu-area .main-menu {
  922. grid-column-gap: 90px;
  923. }
  924. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  925. header.header-two .mainmenu-area .main-menu {
  926. grid-column-gap: 60px;
  927. }
  928. }
  929. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  930. header.header-two .mainmenu-area .main-menu {
  931. grid-column-gap: 30px;
  932. }
  933. }
  934. header.header-two .mainmenu-area .main-right {
  935. text-align: right;
  936. }
  937. header.header-two .mainmenu-area .main-right .offcanvas-trigger {
  938. margin-left: 50px;
  939. }
  940. header.header-two .mainmenu-area .main-right .quote-icon {
  941. text-align: left;
  942. padding-left: 80px;
  943. position: relative;
  944. }
  945. header.header-two .mainmenu-area .main-right .quote-icon .icon {
  946. position: absolute;
  947. left: 0;
  948. top: 50%;
  949. -webkit-transform: translateY(-50%);
  950. transform: translateY(-50%);
  951. }
  952. header.header-two .mainmenu-area .main-right .quote-icon span {
  953. font-weight: 700;
  954. font-size: 14px;
  955. color: #041d38;
  956. font-family: "Oswald", sans-serif;
  957. line-height: 24px;
  958. text-transform: uppercase;
  959. }
  960. header.header-two .mainmenu-area .main-right .quote-icon span span {
  961. display: block;
  962. font-size: 20px;
  963. color: #639BFF;
  964. }
  965. @media (max-width: 767px) {
  966. header.header-two .mainmenu-area .main-right .quote-icon span span {
  967. font-size: 18px;
  968. }
  969. }
  970. header.header-three .mainmenu-area {
  971. background-color: transparent;
  972. padding: 15px 0;
  973. }
  974. @media only screen and (min-width: 768px) and (max-width: 991px) {
  975. header.header-three .mainmenu-area {
  976. padding: 15px 95px 15px 0;
  977. }
  978. }
  979. @media (max-width: 767px) {
  980. header.header-three .mainmenu-area {
  981. padding: 15px 95px 15px 0;
  982. }
  983. }
  984. header.header-three .mainmenu-area .main-menu {
  985. grid-column-gap: 75px;
  986. }
  987. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  988. header.header-three .mainmenu-area .main-menu {
  989. grid-column-gap: 40px;
  990. }
  991. }
  992. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  993. header.header-three .mainmenu-area .main-menu {
  994. grid-column-gap: 30px;
  995. }
  996. }
  997. header.header-three .mainmenu-area .main-menu .logo img.sticky-logo {
  998. display: none;
  999. }
  1000. header.header-three .mainmenu-area .main-menu .menu-items ul li {
  1001. margin-right: 30px;
  1002. }
  1003. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1004. header.header-three .mainmenu-area .main-menu .menu-items ul li {
  1005. margin-right: 0;
  1006. }
  1007. }
  1008. header.header-three .mainmenu-area .main-menu .menu-items ul li a {
  1009. color: #fff;
  1010. line-height: 90px;
  1011. }
  1012. header.header-three .mainmenu-area .main-menu .menu-items ul li.active>a {
  1013. color: #639BFF;
  1014. }
  1015. header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover {
  1016. background-color: #fff;
  1017. }
  1018. header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::after,
  1019. header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::before {
  1020. background-color: #041d38;
  1021. }
  1022. header.header-three .mainmenu-area .main-right .offcanvas-trigger {
  1023. background-color: #fff;
  1024. border-color: #fff;
  1025. color: #041d38;
  1026. }
  1027. header.header-three .mainmenu-area .main-right .offcanvas-trigger:hover {
  1028. background-color: #639BFF;
  1029. border-color: #639BFF;
  1030. }
  1031. header.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
  1032. border-color: #fff;
  1033. background-color: #fff;
  1034. }
  1035. header.header-three.sticky .mainmenu-area .main-menu .logo img.sticky-logo {
  1036. display: block;
  1037. }
  1038. header.header-three.sticky .mainmenu-area .main-menu .logo img.normal-logo {
  1039. display: none;
  1040. }
  1041. header.sticky {
  1042. position: fixed;
  1043. top: 0;
  1044. left: 0;
  1045. right: 0;
  1046. background: rgba(43, 47, 66, .9);
  1047. -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
  1048. box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
  1049. z-index: 99;
  1050. -webkit-animation: sticky 1.2s;
  1051. animation: sticky 1.2s;
  1052. }
  1053. header.sticky .mainmenu-area {
  1054. margin-top: 0;
  1055. }
  1056. header.sticky .mainmenu-area .main-menu .menu-items ul li a {
  1057. /* line-height: 90px; */
  1058. }
  1059. header.sticky .header-top-area {
  1060. display: none;
  1061. }
  1062. header.sticky.header-three .mainmenu-area {
  1063. padding: 0;
  1064. }
  1065. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1066. header.sticky.header-three .mainmenu-area {
  1067. padding: 15px 95px 15px 0;
  1068. }
  1069. }
  1070. @media (max-width: 767px) {
  1071. header.sticky.header-three .mainmenu-area {
  1072. padding: 15px 95px 15px 0;
  1073. }
  1074. }
  1075. header.sticky.header-three .mainmenu-area .main-menu .menu-items ul li a {
  1076. color: #041d38;
  1077. }
  1078. header.sticky.header-three .mainmenu-area .offcanvas-trigger {
  1079. background-color: #639BFF;
  1080. border-color: #639BFF;
  1081. color: #041d38;
  1082. }
  1083. header.sticky.header-three .mainmenu-area .offcanvas-trigger:hover {
  1084. background: transparent;
  1085. border-color: rgba(4, 29, 56, 0.1);
  1086. }
  1087. header.sticky.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
  1088. border-color: rgba(4, 29, 56, 0.1);
  1089. background-color: transparent;
  1090. }
  1091. header .off-canvas-wrap {
  1092. position: fixed;
  1093. width: 450px;
  1094. top: 0;
  1095. min-height: 100vh;
  1096. right: 0;
  1097. -webkit-transition: all 0.4s;
  1098. transition: all 0.4s;
  1099. z-index: 9999999;
  1100. margin-right: -450px;
  1101. -webkit-box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08);
  1102. box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08);
  1103. text-align: left;
  1104. }
  1105. header .off-canvas-wrap.show-off-canvas {
  1106. margin-right: 0;
  1107. }
  1108. header .off-canvas-wrap .overly {
  1109. position: fixed;
  1110. height: 100vh;
  1111. width: 100%;
  1112. z-index: 998;
  1113. background-color: #000;
  1114. left: 0;
  1115. top: 0;
  1116. -webkit-transition: all 0.4s;
  1117. transition: all 0.4s;
  1118. opacity: 0;
  1119. visibility: hidden;
  1120. cursor: pointer;
  1121. }
  1122. header .off-canvas-wrap .overly.show-overly {
  1123. visibility: visible;
  1124. opacity: 0.6;
  1125. }
  1126. header .off-canvas-wrap .off-canvas-widget {
  1127. padding: 90px 50px;
  1128. background-color: #fff;
  1129. height: 100vh;
  1130. /* height: 860px; */
  1131. position: relative;
  1132. z-index: 999;
  1133. }
  1134. header .off-canvas-wrap .off-canvas-widget a.off-canvas-close {
  1135. position: absolute;
  1136. right: 50px;
  1137. top: 40px;
  1138. font-size: 30px;
  1139. color: #041d38;
  1140. }
  1141. header .off-canvas-wrap .off-canvas-widget .widget {
  1142. margin-bottom: 50px;
  1143. }
  1144. header .off-canvas-wrap .off-canvas-widget .widget:last-child {
  1145. margin-bottom: 0;
  1146. }
  1147. header .off-canvas-wrap .off-canvas-widget .widget .widget-title {
  1148. font-size: 20px;
  1149. margin-bottom: 20px;
  1150. text-transform: uppercase;
  1151. letter-spacing: -1px;
  1152. }
  1153. header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li {
  1154. display: -ms-grid;
  1155. display: grid;
  1156. -ms-grid-rows: auto;
  1157. grid-template-rows: auto;
  1158. -ms-grid-columns: 120px 1fr;
  1159. grid-template-columns: 120px 1fr;
  1160. margin-bottom: 30px;
  1161. }
  1162. header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li:last-child {
  1163. margin-bottom: 0;
  1164. }
  1165. header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-img {
  1166. background-size: cover;
  1167. background-position: center;
  1168. }
  1169. header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content {
  1170. padding-left: 20px;
  1171. }
  1172. header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content h6 {
  1173. margin-bottom: 15px;
  1174. font-size: 18px;
  1175. text-transform: uppercase;
  1176. letter-spacing: -1px;
  1177. line-height: 1.3;
  1178. }
  1179. header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time {
  1180. font-size: 15px;
  1181. font-weight: 500;
  1182. }
  1183. header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time i {
  1184. margin-right: 10px;
  1185. }
  1186. header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li {
  1187. font-size: 18px;
  1188. color: #041d38;
  1189. font-weight: 600;
  1190. margin-bottom: 10px;
  1191. padding-left: 25px;
  1192. position: relative;
  1193. }
  1194. header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li i {
  1195. position: absolute;
  1196. left: 0;
  1197. top: 50%;
  1198. -webkit-transform: translateY(-50%);
  1199. transform: translateY(-50%);
  1200. font-size: 15px;
  1201. }
  1202. header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li a {
  1203. color: #041d38;
  1204. }
  1205. header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a {
  1206. height: 40px;
  1207. width: 40px;
  1208. line-height: 40px;
  1209. border: 1px solid #041d38;
  1210. color: #041d38;
  1211. border-radius: 50%;
  1212. text-align: center;
  1213. font-size: 15px;
  1214. margin-right: 10px;
  1215. }
  1216. header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a:hover {
  1217. background-color: #639BFF;
  1218. color: #fff;
  1219. border-color: #639BFF;
  1220. }
  1221. /*===========================
  1222. Banner
  1223. ===========================*/
  1224. .banner-section {
  1225. position: relative;
  1226. z-index: 1;
  1227. max-width: 1920px;
  1228. }
  1229. .banner-section .slider-active .slick-dots {
  1230. position: absolute;
  1231. left: 50%;
  1232. bottom: 130px;
  1233. -webkit-transform: translateX(-50%);
  1234. transform: translateX(-50%);
  1235. bottom: 50px;
  1236. }
  1237. @media (max-width: 767px) {
  1238. .banner-section .slider-active .slick-dots {
  1239. bottom: 50px;
  1240. }
  1241. }
  1242. @media (max-width: 575px) {
  1243. .banner-section .slider-active .slick-dots {
  1244. bottom: 50px;
  1245. }
  1246. }
  1247. .banner-section .slider-active .slick-dots li {
  1248. display: inline-block;
  1249. margin: 0 4px;
  1250. }
  1251. .banner-section .slider-active .slick-dots li button {
  1252. font-size: 0;
  1253. height: 15px;
  1254. width: 15px;
  1255. border: navajowhite;
  1256. border-radius: 50%;
  1257. background: white;
  1258. webkit-box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%);
  1259. box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%);
  1260. }
  1261. .banner-section .slider-active .slick-dots li.slick-active button {
  1262. background-color: #639BFF;
  1263. }
  1264. /*===========================
  1265. About
  1266. ===========================*/
  1267. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1268. .about-section .about-tile-gallery {
  1269. margin-bottom: 50px;
  1270. }
  1271. }
  1272. @media (max-width: 767px) {
  1273. .about-section .about-tile-gallery {
  1274. margin-bottom: 50px;
  1275. }
  1276. }
  1277. @media (max-width: 575px) {
  1278. .about-section .about-tile-gallery {
  1279. min-height: 450px;
  1280. }
  1281. }
  1282. .about-section .about-tile-gallery img {
  1283. position: absolute;
  1284. }
  1285. .about-section .about-tile-gallery img.image-one {
  1286. top: 0;
  1287. left: 0;
  1288. max-width: 400px;
  1289. max-height: 450px;
  1290. z-index: 1;
  1291. }
  1292. @media (max-width: 575px) {
  1293. .about-section .about-tile-gallery img.image-one {
  1294. max-width: 100%;
  1295. }
  1296. }
  1297. .about-section .about-tile-gallery img.image-two {
  1298. right: 20px;
  1299. bottom: 0;
  1300. max-width: 400px;
  1301. max-height: 260px;
  1302. z-index: 2;
  1303. }
  1304. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1305. .about-section .about-tile-gallery img.image-two {
  1306. max-width: 340px;
  1307. }
  1308. }
  1309. @media (max-width: 575px) {
  1310. .about-section .about-tile-gallery img.image-two {
  1311. right: 0;
  1312. max-width: 300px;
  1313. }
  1314. }
  1315. @media (max-width: 399px) {
  1316. .about-section .about-tile-gallery img.image-two {
  1317. max-width: 250px;
  1318. }
  1319. }
  1320. .about-section .about-tile-gallery img.image-three {
  1321. right: 20px;
  1322. top: 20px;
  1323. max-width: 160px;
  1324. z-index: 2;
  1325. }
  1326. @media (max-width: 575px) {
  1327. .about-section .about-tile-gallery img.image-three {
  1328. right: -15px;
  1329. }
  1330. }
  1331. .about-section .about-tile-gallery img.icon {
  1332. top: 140px;
  1333. right: 95px;
  1334. z-index: 3;
  1335. }
  1336. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1337. .about-section .about-tile-gallery img.icon {
  1338. right: 0;
  1339. }
  1340. }
  1341. @media (max-width: 575px) {
  1342. .about-section .about-tile-gallery img.icon {
  1343. display: none;
  1344. }
  1345. }
  1346. .about-section .about-tile-gallery img.zero-icon {
  1347. z-index: 4;
  1348. left: -45px;
  1349. bottom: 20px;
  1350. }
  1351. @media (min-width: 1600px) {
  1352. .about-section .about-tile-gallery img.zero-icon {
  1353. bottom: 40px;
  1354. left: -140px;
  1355. }
  1356. }
  1357. @media (max-width: 575px) {
  1358. .about-section .about-tile-gallery img.zero-icon {
  1359. left: -30px;
  1360. max-width: 150px;
  1361. }
  1362. }
  1363. @media (max-width: 767px) {
  1364. .about-section .about-text {
  1365. padding-left: 0;
  1366. }
  1367. }
  1368. .about-section .about-text .about-features .sngle-features {
  1369. margin-bottom: 30px;
  1370. }
  1371. .about-section .about-text .about-features .sngle-features:last-child {
  1372. margin-bottom: 0;
  1373. }
  1374. @media (max-width: 575px) {
  1375. .about-section .about-text .about-features .sngle-features {
  1376. -ms-grid-rows: 90px 1fr;
  1377. grid-template-rows: 90px 1fr;
  1378. }
  1379. }
  1380. .about-section .about-text .about-features .sngle-features .chart {
  1381. position: relative;
  1382. min-width: 94px;
  1383. min-height: 94px;
  1384. background-image: url(../img/white_round.png);
  1385. }
  1386. .about-section .about-text .about-features .sngle-features .chart .bg_01 {
  1387. min-width: 94px;
  1388. min-height: 94px;
  1389. background-image: url(../img/blue_round.png);
  1390. transform: rotate(270deg);
  1391. -ms-transform: rotate(270deg);
  1392. /* IE 9*/
  1393. -moz-transform: rotate(270deg);
  1394. /* Firefox */
  1395. -webkit-transform: rotate(270deg);
  1396. /* Safari 和 Chrome */
  1397. -o-transform: rotate(270deg);
  1398. }
  1399. .about-section .about-text .about-features .sngle-features .chart .bg_01 span {
  1400. transform: rotate(90deg);
  1401. -ms-transform: rotate(90deg);
  1402. -moz-transform: rotate(90deg);
  1403. -webkit-transform: rotate(90deg);
  1404. -o-transform: rotate(90deg);
  1405. font-size: 45px;
  1406. font-weight: 600;
  1407. }
  1408. .about-section .about-text .about-features .sngle-features .chart .bg_02 {
  1409. min-width: 94px;
  1410. min-height: 94px;
  1411. background-image: url(../img/blue_round.png);
  1412. }
  1413. .about-section .about-text .about-features .sngle-features .chart .bg_02 span {
  1414. font-size: 45px;
  1415. font-weight: 600;
  1416. }
  1417. .about-section .about-text .about-features .sngle-features .chart .bg_03 {
  1418. min-width: 94px;
  1419. min-height: 94px;
  1420. background-image: url(../img/blue_round.png);
  1421. transform: rotate(180deg);
  1422. -ms-transform: rotate(180deg);
  1423. -moz-transform: rotate(180deg);
  1424. -webkit-transform: rotate(180deg);
  1425. -o-transform: rotate(180deg);
  1426. }
  1427. .about-section .about-text .about-features .sngle-features .chart .bg_03 span {
  1428. transform: rotate(180deg);
  1429. -ms-transform: rotate(180deg);
  1430. -moz-transform: rotate(180deg);
  1431. -webkit-transform: rotate(180deg);
  1432. -o-transform: rotate(180deg);
  1433. font-size: 45px;
  1434. font-weight: 600;
  1435. }
  1436. .about-section .about-text .about-features .sngle-features .chart span.icon {
  1437. position: absolute;
  1438. left: 50%;
  1439. top: 50%;
  1440. -webkit-transform: translate(-50%, -50%);
  1441. transform: translate(-50%, -50%);
  1442. font-size: 30px;
  1443. color: #041d38;
  1444. }
  1445. .about-section .about-text .about-features .sngle-features .chart canvas {
  1446. position: absolute;
  1447. left: 0;
  1448. top: 0;
  1449. }
  1450. .about-section .about-text .about-features .sngle-features .counter-box {
  1451. text-align: center;
  1452. color: #639BFF;
  1453. font-weight: 700;
  1454. font-size: 48px;
  1455. font-family: "Oswald", sans-serif;
  1456. }
  1457. .about-section .about-text .about-features .sngle-features .desc {
  1458. font-size: 20px;
  1459. line-height: 1.8;
  1460. padding-left: 30px;
  1461. }
  1462. /* @media (max-width: 575px) {
  1463. .about-section .about-text .about-features .sngle-features .desc {
  1464. margin-top: 20px;
  1465. grid-column: 1/-1;
  1466. }
  1467. } */
  1468. .about-section .about-text .about-features .sngle-features .desc h4 {
  1469. margin-bottom: 15px;
  1470. text-transform: uppercase;
  1471. }
  1472. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1473. .about-section .about-text .about-features .sngle-features .desc h4 {
  1474. font-size: 20px;
  1475. }
  1476. }
  1477. .about-section .about-text .about-extra {
  1478. padding-left: 215px;
  1479. position: relative;
  1480. margin-top: 80px;
  1481. }
  1482. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1483. .about-section .about-text .about-extra {
  1484. margin-top: 50px;
  1485. padding-left: 180px;
  1486. }
  1487. }
  1488. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1489. .about-section .about-text .about-extra {
  1490. margin-top: 30px;
  1491. padding-left: 0;
  1492. padding-bottom: 200px;
  1493. }
  1494. }
  1495. @media (max-width: 767px) {
  1496. .about-section .about-text .about-extra {
  1497. margin-top: 30px;
  1498. padding-left: 0;
  1499. padding-bottom: 200px;
  1500. }
  1501. }
  1502. @media (max-width: 575px) {
  1503. .about-section .about-text .about-extra {
  1504. padding-bottom: 150px;
  1505. }
  1506. }
  1507. @media (max-width: 575px) {
  1508. .banner-section {
  1509. padding-top: 89px;
  1510. }
  1511. }
  1512. .about-section .about-text .about-extra .experience-tag {
  1513. position: absolute;
  1514. left: -335px;
  1515. top: 50%;
  1516. -webkit-transform: translateY(-50%);
  1517. transform: translateY(-50%);
  1518. z-index: 6;
  1519. }
  1520. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  1521. .about-section .about-text .about-extra .experience-tag {
  1522. left: -315px;
  1523. max-width: 500px;
  1524. }
  1525. }
  1526. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1527. .about-section .about-text .about-extra .experience-tag {
  1528. left: -220px;
  1529. max-width: 350px;
  1530. }
  1531. }
  1532. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1533. .about-section .about-text .about-extra .experience-tag {
  1534. left: 0;
  1535. bottom: 0;
  1536. -webkit-transform: translate(0, 0);
  1537. transform: translate(0, 0);
  1538. top: auto;
  1539. max-width: 100%;
  1540. }
  1541. }
  1542. @media (max-width: 767px) {
  1543. .about-section .about-text .about-extra .experience-tag {
  1544. left: 0;
  1545. bottom: 0;
  1546. -webkit-transform: translate(0, 0);
  1547. transform: translate(0, 0);
  1548. top: auto;
  1549. max-width: 100%;
  1550. }
  1551. }
  1552. .about-section .about-tile-gallery-two {
  1553. min-height: 550px;
  1554. position: relative;
  1555. z-index: 5;
  1556. }
  1557. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1558. .about-section .about-tile-gallery-two {
  1559. min-height: 515px;
  1560. }
  1561. }
  1562. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1563. .about-section .about-tile-gallery-two {
  1564. margin-bottom: 50px;
  1565. }
  1566. }
  1567. @media (max-width: 767px) {
  1568. .about-section .about-tile-gallery-two {
  1569. margin-bottom: 50px;
  1570. }
  1571. }
  1572. @media (max-width: 575px) {
  1573. .about-section .about-tile-gallery-two {
  1574. min-height: 410px;
  1575. }
  1576. }
  1577. .about-section .about-tile-gallery-two .image-two {
  1578. position: absolute;
  1579. left: -20px;
  1580. bottom: 0;
  1581. border-right: 20px solid #fff;
  1582. border-top: 20px solid #fff;
  1583. z-index: 1;
  1584. }
  1585. @media (min-width: 1600px) {
  1586. .about-section .about-tile-gallery-two .image-two {
  1587. left: -120px;
  1588. }
  1589. }
  1590. @media (max-width: 575px) {
  1591. .about-section .about-tile-gallery-two .image-two {
  1592. left: -15px;
  1593. }
  1594. }
  1595. .about-section.about-style-two .about-iconic-boxes {
  1596. margin-bottom: -60px;
  1597. z-index: 22;
  1598. position: relative;
  1599. }
  1600. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1601. .about-section.about-style-two .about-iconic-boxes {
  1602. margin-bottom: -240px;
  1603. }
  1604. }
  1605. @media (max-width: 767px) {
  1606. .about-section.about-style-two .about-iconic-boxes {
  1607. margin-bottom: -240px;
  1608. }
  1609. }
  1610. .about-section.about-style-two .about-iconic-boxes .iconic-box {
  1611. padding: 30px 35px;
  1612. background-color: #fff;
  1613. -webkit-box-shadow: 0px 10px 20px 0px rgba(149, 183, 208, 0.06);
  1614. box-shadow: 0px 10px 20px 0px rgba(149, 183, 208, 0.06);
  1615. position: relative;
  1616. z-index: 1;
  1617. }
  1618. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1619. .about-section.about-style-two .about-iconic-boxes .iconic-box {
  1620. padding: 30px 25px;
  1621. }
  1622. }
  1623. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1624. .about-section.about-style-two .about-iconic-boxes .iconic-box {
  1625. margin-bottom: 30px;
  1626. }
  1627. }
  1628. @media (max-width: 767px) {
  1629. .about-section.about-style-two .about-iconic-boxes .iconic-box {
  1630. margin-bottom: 30px;
  1631. }
  1632. }
  1633. @media (max-width: 399px) {
  1634. .about-section.about-style-two .about-iconic-boxes .iconic-box {
  1635. padding: 30px 25px;
  1636. }
  1637. }
  1638. .about-section.about-style-two .about-iconic-boxes .iconic-box h4 {
  1639. text-transform: uppercase;
  1640. letter-spacing: -1px;
  1641. margin-bottom: 10px;
  1642. }
  1643. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1644. .about-section.about-style-two .about-iconic-boxes .iconic-box h4 {
  1645. font-size: 20px;
  1646. }
  1647. }
  1648. @media (max-width: 399px) {
  1649. .about-section.about-style-two .about-iconic-boxes .iconic-box h4 {
  1650. font-size: 20px;
  1651. }
  1652. }
  1653. .about-section.about-style-two .about-iconic-boxes .iconic-box .icon {
  1654. position: absolute;
  1655. right: 35px;
  1656. top: 30px;
  1657. height: 30px;
  1658. width: 30px;
  1659. text-align: center;
  1660. line-height: 30px;
  1661. background-color: #639BFF;
  1662. color: #041d38;
  1663. z-index: 2;
  1664. }
  1665. .about-section.about-style-two .about-iconic-boxes .iconic-box .count {
  1666. position: absolute;
  1667. left: 0;
  1668. bottom: 0;
  1669. font-weight: 700;
  1670. font-family: "Oswald", sans-serif;
  1671. font-size: 70px;
  1672. color: #f7fcff;
  1673. z-index: -1;
  1674. line-height: 1;
  1675. }
  1676. .about-section.about-style-two .about-text-warp {
  1677. background-color: #f7fcff;
  1678. position: relative;
  1679. z-index: 1;
  1680. padding-top: 120px;
  1681. padding-bottom: 120px;
  1682. }
  1683. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1684. .about-section.about-style-two .about-text-warp {
  1685. padding-top: 280px;
  1686. }
  1687. }
  1688. @media (max-width: 767px) {
  1689. .about-section.about-style-two .about-text-warp {
  1690. padding-top: 280px;
  1691. }
  1692. }
  1693. .about-section.about-style-two .about-text-warp .mockup-img {
  1694. position: absolute;
  1695. right: 0;
  1696. bottom: -110px;
  1697. max-width: 1000px;
  1698. z-index: -1;
  1699. }
  1700. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  1701. .about-section.about-style-two .about-text-warp .mockup-img {
  1702. max-width: 800px;
  1703. bottom: -80px;
  1704. }
  1705. }
  1706. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1707. .about-section.about-style-two .about-text-warp .mockup-img {
  1708. max-width: 575px;
  1709. bottom: 42%;
  1710. -webkit-transform: translateY(50%);
  1711. transform: translateY(50%);
  1712. }
  1713. }
  1714. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1715. .about-section.about-style-two .about-text-warp .mockup-img {
  1716. display: none;
  1717. }
  1718. }
  1719. @media (max-width: 767px) {
  1720. .about-section.about-style-two .about-text-warp .mockup-img {
  1721. display: none;
  1722. }
  1723. }
  1724. .about-section.about-style-two .about-text-warp .about-small-img {
  1725. position: absolute;
  1726. top: 53%;
  1727. left: 49%;
  1728. z-index: 1;
  1729. }
  1730. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  1731. .about-section.about-style-two .about-text-warp .about-small-img {
  1732. left: 44%;
  1733. }
  1734. }
  1735. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1736. .about-section.about-style-two .about-text-warp .about-small-img {
  1737. display: none;
  1738. }
  1739. }
  1740. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1741. .about-section.about-style-two .about-text-warp .about-small-img {
  1742. display: none;
  1743. }
  1744. }
  1745. @media (max-width: 767px) {
  1746. .about-section.about-style-two .about-text-warp .about-small-img {
  1747. display: none;
  1748. }
  1749. }
  1750. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1751. .about-section .about-img {
  1752. margin-bottom: 50px;
  1753. }
  1754. }
  1755. @media (max-width: 767px) {
  1756. .about-section .about-img {
  1757. margin-bottom: 50px;
  1758. }
  1759. }
  1760. .about-section .with-man-shape {
  1761. position: relative;
  1762. padding-top: 150px;
  1763. padding-bottom: 150px;
  1764. }
  1765. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1766. .about-section .with-man-shape {
  1767. padding-top: 120px;
  1768. padding-bottom: 60px;
  1769. }
  1770. }
  1771. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1772. .about-section .with-man-shape {
  1773. padding-top: 120px;
  1774. padding-bottom: 500px;
  1775. }
  1776. }
  1777. @media (max-width: 767px) {
  1778. .about-section .with-man-shape {
  1779. padding-top: 120px;
  1780. padding-bottom: 360px;
  1781. }
  1782. }
  1783. @media (max-width: 575px) {
  1784. .about-section .with-man-shape {
  1785. padding-bottom: 280px;
  1786. }
  1787. }
  1788. @media (max-width: 399px) {
  1789. .about-section .with-man-shape {
  1790. padding-bottom: 120px;
  1791. }
  1792. }
  1793. .about-section .with-man-shape .about-man-img {
  1794. position: absolute;
  1795. left: 0;
  1796. bottom: 0;
  1797. max-width: 575px;
  1798. }
  1799. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1800. .about-section .with-man-shape .about-man-img {
  1801. max-width: 450px;
  1802. }
  1803. }
  1804. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1805. .about-section .with-man-shape .about-man-img {
  1806. left: 50%;
  1807. max-width: 345px;
  1808. -webkit-transform: translateX(-50%);
  1809. transform: translateX(-50%);
  1810. }
  1811. }
  1812. @media (max-width: 767px) {
  1813. .about-section .with-man-shape .about-man-img {
  1814. left: 50%;
  1815. max-width: 250px;
  1816. -webkit-transform: translateX(-50%);
  1817. transform: translateX(-50%);
  1818. }
  1819. }
  1820. @media (max-width: 399px) {
  1821. .about-section .with-man-shape .about-man-img {
  1822. display: none;
  1823. }
  1824. }
  1825. .about-section .with-man-shape .about-man-img .shape {
  1826. position: relative;
  1827. z-index: 1;
  1828. }
  1829. .about-section .with-man-shape .about-man-img .shape::after {
  1830. content: '';
  1831. position: absolute;
  1832. left: 50%;
  1833. -webkit-transform: translateX(-49%);
  1834. transform: translateX(-49%);
  1835. top: 100px;
  1836. background-color: #639BFF;
  1837. height: 465px;
  1838. width: 465px;
  1839. border-radius: 50%;
  1840. z-index: -1;
  1841. }
  1842. @media (max-width: 767px) {
  1843. .about-section .with-man-shape .about-man-img .shape::after {
  1844. height: 300px;
  1845. width: 300px;
  1846. }
  1847. }
  1848. .about-section .with-man-shape .about-text {
  1849. padding-left: 80px;
  1850. }
  1851. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1852. .about-section .with-man-shape .about-text {
  1853. padding-left: 20px;
  1854. }
  1855. }
  1856. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1857. .about-section .with-man-shape .about-text {
  1858. padding-left: 0;
  1859. }
  1860. }
  1861. @media (max-width: 767px) {
  1862. .about-section .with-man-shape .about-text {
  1863. padding-left: 0;
  1864. }
  1865. }
  1866. /*===========================
  1867. Sidebar Style
  1868. ===========================*/
  1869. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1870. .sidebar {
  1871. margin-top: 80px;
  1872. }
  1873. }
  1874. @media (max-width: 767px) {
  1875. .sidebar {
  1876. margin-top: 80px;
  1877. }
  1878. }
  1879. .sidebar .widget {
  1880. padding: 40px;
  1881. border: 2px solid #ededed;
  1882. }
  1883. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  1884. .sidebar .widget {
  1885. padding: 40px 20px;
  1886. }
  1887. }
  1888. @media (max-width: 399px) {
  1889. .sidebar .widget {
  1890. padding: 40px 20px;
  1891. }
  1892. }
  1893. .sidebar .widget .widget-title {
  1894. font-size: 20px;
  1895. text-transform: uppercase;
  1896. margin-bottom: 40px;
  1897. line-height: 1;
  1898. position: relative;
  1899. padding-left: 30px;
  1900. }
  1901. .sidebar .widget .widget-title::before {
  1902. position: absolute;
  1903. left: 0;
  1904. top: 0;
  1905. height: 100%;
  1906. width: 2px;
  1907. background-color: #639BFF;
  1908. content: '';
  1909. }
  1910. .sidebar .widget.about-author-widget .author-box {
  1911. font-size: 14px;
  1912. text-align: center;
  1913. }
  1914. .sidebar .widget.about-author-widget .author-box h6 {
  1915. font-size: 18px;
  1916. text-transform: uppercase;
  1917. letter-spacing: -1px;
  1918. margin-top: 30px;
  1919. padding-bottom: 20px;
  1920. }
  1921. .sidebar .widget.about-author-widget .author-box .social-icon {
  1922. margin-top: 25px;
  1923. }
  1924. .sidebar .widget.about-author-widget .author-box .social-icon li {
  1925. display: inline-block;
  1926. margin: 0 5px;
  1927. }
  1928. .sidebar .widget.about-author-widget .author-box .social-icon li a {
  1929. padding: 5px;
  1930. color: #b3bed3;
  1931. }
  1932. .sidebar .widget.about-author-widget .author-box .social-icon li a:hover {
  1933. color: #639BFF;
  1934. }
  1935. .sidebar .widget.search-widget form {
  1936. position: relative;
  1937. }
  1938. .sidebar .widget.search-widget form input {
  1939. width: 100%;
  1940. background-color: #f6f4ff;
  1941. height: 60px;
  1942. border: none;
  1943. padding-left: 30px;
  1944. padding-right: 60px;
  1945. font-size: 14px;
  1946. }
  1947. .sidebar .widget.search-widget form button {
  1948. border: none;
  1949. position: absolute;
  1950. right: 0;
  1951. top: 0;
  1952. width: 60px;
  1953. height: 100%;
  1954. z-index: 1;
  1955. background-color: #639BFF;
  1956. font-size: 14px;
  1957. -webkit-transition: all 0.3s ease-out 0s;
  1958. transition: all 0.3s ease-out 0s;
  1959. }
  1960. .sidebar .widget.search-widget form button:hover {
  1961. background-color: #041d38;
  1962. color: #fff;
  1963. }
  1964. .sidebar .widget.popular-feeds .single-popular-feed {
  1965. display: -ms-grid;
  1966. display: grid;
  1967. -ms-grid-rows: 1fr;
  1968. grid-template-rows: 1fr;
  1969. -ms-grid-columns: 80px 1fr;
  1970. grid-template-columns: 80px 1fr;
  1971. grid-column-gap: 15px;
  1972. margin-bottom: 30px;
  1973. padding-bottom: 30px;
  1974. border-bottom: 1px solid #e1e6ff;
  1975. -webkit-box-align: center;
  1976. -ms-flex-align: center;
  1977. align-items: center;
  1978. }
  1979. .sidebar .widget.popular-feeds .single-popular-feed:last-child {
  1980. margin-bottom: 0;
  1981. padding-bottom: 0;
  1982. border: none;
  1983. }
  1984. .sidebar .widget.popular-feeds .single-popular-feed .feed-desc h6 {
  1985. text-transform: uppercase;
  1986. font-size: 16px;
  1987. margin-bottom: 10px;
  1988. }
  1989. .sidebar .widget.popular-feeds .single-popular-feed .feed-desc .time {
  1990. font-size: 14px;
  1991. }
  1992. .sidebar .widget.popular-feeds .single-popular-feed .feed-desc .time i {
  1993. margin-right: 5px;
  1994. }
  1995. .sidebar .widget.categories-widget ul li {
  1996. margin-bottom: 10px;
  1997. }
  1998. .sidebar .widget.categories-widget ul li:last-child {
  1999. margin-bottom: 0;
  2000. }
  2001. .sidebar .widget.categories-widget ul li a {
  2002. font-size: 14px;
  2003. padding-left: 30px;
  2004. height: 50px;
  2005. background-color: #edf3ff;
  2006. display: block;
  2007. position: relative;
  2008. line-height: 50px;
  2009. color: #041d38;
  2010. -webkit-transition: all 0.3s ease-out 0s;
  2011. transition: all 0.3s ease-out 0s;
  2012. }
  2013. .sidebar .widget.categories-widget ul li a span {
  2014. position: absolute;
  2015. right: 0;
  2016. top: 0;
  2017. width: 50px;
  2018. height: 50px;
  2019. line-height: 50px;
  2020. text-align: center;
  2021. background-color: #d8e5ff;
  2022. -webkit-transition: all 0.3s ease-out 0s;
  2023. transition: all 0.3s ease-out 0s;
  2024. }
  2025. .sidebar .widget.categories-widget ul li a:hover {
  2026. background-color: #639BFF;
  2027. }
  2028. .sidebar .widget.categories-widget ul li a:hover span {
  2029. background-color: #ffc35c;
  2030. }
  2031. .sidebar .widget.socail-widget ul li {
  2032. display: inline-block;
  2033. margin-right: 10px;
  2034. }
  2035. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  2036. .sidebar .widget.socail-widget ul li {
  2037. margin-right: 5px;
  2038. }
  2039. }
  2040. @media (max-width: 399px) {
  2041. .sidebar .widget.socail-widget ul li {
  2042. margin-right: 5px;
  2043. }
  2044. }
  2045. .sidebar .widget.socail-widget ul li a {
  2046. height: 40px;
  2047. width: 40px;
  2048. line-height: 40px;
  2049. font-size: 14px;
  2050. color: #041d38;
  2051. background-color: #edf3ff;
  2052. text-align: center;
  2053. }
  2054. .sidebar .widget.socail-widget ul li a:hover {
  2055. background-color: #639BFF;
  2056. }
  2057. .sidebar .widget.twitter-feed-widget ul li {
  2058. margin-bottom: 30px;
  2059. padding-bottom: 30px;
  2060. font-size: 12px;
  2061. border-bottom: 1px solid #e1e6ff;
  2062. padding-left: 35px;
  2063. position: relative;
  2064. }
  2065. .sidebar .widget.twitter-feed-widget ul li::before {
  2066. position: absolute;
  2067. left: 0;
  2068. top: 0;
  2069. content: '\f099';
  2070. font-family: 'Font Awesome 5 Brands';
  2071. font-size: 14px;
  2072. color: #639BFF;
  2073. }
  2074. .sidebar .widget.twitter-feed-widget ul li:last-child {
  2075. margin-bottom: 0;
  2076. padding-bottom: 0;
  2077. border: none;
  2078. }
  2079. .sidebar .widget.twitter-feed-widget ul li a {
  2080. color: #041d38;
  2081. }
  2082. .sidebar .widget.twitter-feed-widget ul li .date {
  2083. text-transform: uppercase;
  2084. margin-top: 15px;
  2085. font-weight: 500;
  2086. }
  2087. .sidebar .widget.instagram-feed-widget ul {
  2088. display: -ms-flexbox!important;
  2089. display: flex!important;
  2090. -ms-flex-pack: start!important;
  2091. justify-content: flex-start!important;
  2092. -ms-flex-align: center!important;
  2093. align-items: center!important;
  2094. }
  2095. .sidebar .widget.popular-tag-widget ul li {
  2096. display: inline-block;
  2097. margin-right: 5px;
  2098. margin-bottom: 10px;
  2099. }
  2100. .sidebar .widget.popular-tag-widget ul li a {
  2101. font-size: 12px;
  2102. color: #041d38;
  2103. padding: 10px 20px;
  2104. background-color: #f4f4f4;
  2105. }
  2106. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  2107. .sidebar .widget.popular-tag-widget ul li a {
  2108. padding: 10px 15px;
  2109. }
  2110. }
  2111. @media (max-width: 399px) {
  2112. .sidebar .widget.popular-tag-widget ul li a {
  2113. padding: 10px 15px;
  2114. }
  2115. }
  2116. .sidebar .widget.popular-tag-widget ul li a:hover {
  2117. background-color: #639BFF;
  2118. }
  2119. .sidebar .widget.banner-ad-widget {
  2120. padding: 0;
  2121. border: none;
  2122. }
  2123. .sidebar .widget.contact-widget .input-group {
  2124. margin-top: -2px;
  2125. }
  2126. .sidebar .widget.service-cat-widget li a,
  2127. .sidebar .widget.brouchers-widget li a {
  2128. display: block;
  2129. border: 2px solid #ededed;
  2130. padding: 15px 30px;
  2131. text-transform: uppercase;
  2132. color: #041d38;
  2133. font-family: "Oswald", sans-serif;
  2134. font-weight: 600;
  2135. font-size: 14px;
  2136. }
  2137. .sidebar .widget.service-cat-widget li a:hover,
  2138. .sidebar .widget.brouchers-widget li a:hover {
  2139. background-color: #639BFF;
  2140. color: #fff;
  2141. border-color: #639BFF;
  2142. }
  2143. .sidebar .widget.service-cat-widget li:not(:last-child) a,
  2144. .sidebar .widget.brouchers-widget li:not(:last-child) a {
  2145. border-bottom: none;
  2146. }
  2147. .sidebar .widget.brouchers-widget li a i {
  2148. margin-right: 20px;
  2149. color: #639BFF;
  2150. -webkit-transition: all 0.3s ease-out 0s;
  2151. transition: all 0.3s ease-out 0s;
  2152. }
  2153. .sidebar .widget.brouchers-widget li a:hover i {
  2154. color: #fff;
  2155. }
  2156. /*===========================
  2157. Footer
  2158. ===========================*/
  2159. footer {
  2160. background-color: #2B2F42;
  2161. }
  2162. @media (max-width: 575px) {
  2163. footer .social-icon {
  2164. margin-top: 30px;
  2165. }
  2166. }
  2167. .copyrigt-or-code span {
  2168. font-size: 22px;
  2169. }
  2170. footer .social-icon a {
  2171. text-align: center;
  2172. background-color: #14212b;
  2173. color: #fff;
  2174. height: 60px;
  2175. width: 60px;
  2176. line-height: 60px;
  2177. border-radius: 50%;
  2178. margin-left: 10px;
  2179. }
  2180. @media (max-width: 767px) {
  2181. footer .social-icon a {
  2182. font-size: 15px;
  2183. line-height: 45px;
  2184. height: 45px;
  2185. width: 45px;
  2186. }
  2187. }
  2188. @media (max-width: 399px) {
  2189. footer .social-icon a {
  2190. margin-left: 5px;
  2191. }
  2192. }
  2193. footer .social-icon a:hover {
  2194. background-color: #639BFF;
  2195. color: #14212b;
  2196. }
  2197. footer .footer-top {
  2198. background-color: #091620;
  2199. padding: 40px 0;
  2200. }
  2201. footer .footer-widget-area {
  2202. padding-top: 90px;
  2203. /* padding-bottom: 40px; */
  2204. }
  2205. footer .footer-widget-area .widget {
  2206. margin-bottom: 40px;
  2207. text-align: center
  2208. }
  2209. footer .footer-widget-area .widget,
  2210. footer .footer-widget-area .widget a {
  2211. color: #fff;
  2212. }
  2213. footer .footer-widget-area .widget a:hover {
  2214. color: #639BFF;
  2215. }
  2216. footer .footer-widget-area .widget .widget-title {
  2217. font-size: 20px;
  2218. text-transform: uppercase;
  2219. color: #fff;
  2220. margin-bottom: 40px;
  2221. font-weight: normal
  2222. }
  2223. @media only screen and (min-width: 768px) and (max-width: 991px) {
  2224. footer .footer-widget-area .widget .widget-title {
  2225. margin-bottom: 30px;
  2226. }
  2227. }
  2228. @media (max-width: 767px) {
  2229. footer .footer-widget-area .widget .widget-title {
  2230. margin-bottom: 30px;
  2231. }
  2232. }
  2233. footer .footer-widget-area .widget.nav-widget ul li {
  2234. overflow: hidden;
  2235. text-overflow: ellipsis;
  2236. white-space: nowrap;
  2237. line-height: 38px;
  2238. }
  2239. footer .footer-widget-area .widget.recent-post .post-loop .post {
  2240. display: -ms-grid;
  2241. display: grid;
  2242. -ms-grid-rows: auto;
  2243. grid-template-rows: auto;
  2244. -ms-grid-columns: 70px 1fr;
  2245. grid-template-columns: 70px 1fr;
  2246. grid-column-gap: 20px;
  2247. -webkit-box-align: center;
  2248. -ms-flex-align: center;
  2249. align-items: center;
  2250. padding-bottom: 20px;
  2251. margin-bottom: 20px;
  2252. border-bottom: 1px solid #283742;
  2253. }
  2254. @media only screen and (min-width: 576px) and (max-width: 767px) {
  2255. footer .footer-widget-area .widget.recent-post .post-loop .post {
  2256. grid-column-gap: 10px;
  2257. }
  2258. }
  2259. footer .footer-widget-area .widget.recent-post .post-loop .post:last-child {
  2260. margin-bottom: 0;
  2261. padding-bottom: 0;
  2262. border: none;
  2263. }
  2264. footer .footer-widget-area .widget.recent-post .post-loop .post .post-img {
  2265. max-width: 70px;
  2266. max-height: 70px;
  2267. }
  2268. footer .footer-widget-area .widget.recent-post .post-loop .post .time {
  2269. font-size: 12px;
  2270. color: #96abbb;
  2271. text-transform: uppercase;
  2272. font-family: "Oswald", sans-serif;
  2273. font-weight: 700;
  2274. }
  2275. footer .footer-widget-area .widget.recent-post .post-loop .post .time i {
  2276. color: #639BFF;
  2277. margin-right: 2px;
  2278. }
  2279. footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
  2280. font-size: 20px;
  2281. line-height: 1.3;
  2282. color: #fff;
  2283. text-transform: uppercase;
  2284. }
  2285. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  2286. footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
  2287. font-size: 16px;
  2288. }
  2289. }
  2290. @media only screen and (min-width: 576px) and (max-width: 767px) {
  2291. footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
  2292. font-size: 14px;
  2293. }
  2294. }
  2295. @media (max-width: 575px) {
  2296. footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
  2297. font-size: 16px;
  2298. }
  2299. }
  2300. footer .copy-right-area .copyrigt-text {
  2301. padding: 35px 0 60px;
  2302. /* border-top: 1px solid #283742; */
  2303. font-weight: 700;
  2304. font-size: 14px;
  2305. color: #fff;
  2306. text-align: center
  2307. }
  2308. @media (max-width: 767px) {
  2309. footer .copy-right-area .copyrigt-text {
  2310. font-size: 16px;
  2311. }
  2312. }
  2313. @media (max-width: 575px) {
  2314. footer .copy-right-area .copyrigt-text {
  2315. text-align: center;
  2316. }
  2317. footer .copy-right-area .copyrigt-text p {
  2318. margin-bottom: 10px;
  2319. }
  2320. footer .copy-right-area .copyrigt-text p:last-child {
  2321. margin-bottom: 0;
  2322. }
  2323. }
  2324. footer .copy-right-area .copyrigt-text a {
  2325. color: #fff;
  2326. }
  2327. footer .copy-right-area .copyrigt-text a:hover {
  2328. color: #639BFF;
  2329. }
  2330. footer.footer-style-two {
  2331. background-color: #041d38;
  2332. }
  2333. footer.footer-style-two .footer-widget-area {
  2334. padding-bottom: 50px;
  2335. }
  2336. footer.footer-style-two .footer-widget-area .foter-logo {
  2337. margin-bottom: 50px;
  2338. }
  2339. @media (max-width: 767px) {
  2340. footer.footer-style-two .footer-widget-area .foter-logo {
  2341. margin-bottom: 80px;
  2342. }
  2343. }
  2344. footer.footer-style-two .footer-widget-area .widget {
  2345. padding: 50px 35px;
  2346. text-align: center;
  2347. line-height: 38px;
  2348. }
  2349. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  2350. footer.footer-style-two .footer-widget-area .widget {
  2351. padding: 45px 10px;
  2352. }
  2353. }
  2354. @media only screen and (min-width: 576px) and (max-width: 767px) {
  2355. footer.footer-style-two .footer-widget-area .widget {
  2356. padding: 0;
  2357. }
  2358. }
  2359. @media (max-width: 575px) {
  2360. footer.footer-style-two .footer-widget-area .widget {
  2361. padding: 0 30px;
  2362. }
  2363. }
  2364. @media (max-width: 399px) {
  2365. footer.footer-style-two .footer-widget-area .widget {
  2366. padding: 0 15px;
  2367. }
  2368. }
  2369. footer.footer-style-two .footer-widget-area .widget .widget-title {
  2370. font-size: 30px;
  2371. }
  2372. @media only screen and (min-width: 576px) and (max-width: 767px) {
  2373. footer.footer-style-two .footer-widget-area .widget.about-widget {
  2374. font-size: 15px;
  2375. line-height: 30px;
  2376. }
  2377. }
  2378. footer.footer-style-two .footer-widget-area .widget.getin-widget {
  2379. background-color: #639BFF;
  2380. font-weight: 700;
  2381. }
  2382. @media (max-width: 767px) {
  2383. footer.footer-style-two .footer-widget-area .widget.getin-widget {
  2384. padding: 50px 0;
  2385. }
  2386. }
  2387. footer.footer-style-two .footer-widget-area .widget.getin-widget li {
  2388. line-height: 36px;
  2389. }
  2390. footer.footer-style-two .footer-widget-area .widget.getin-widget,
  2391. footer.footer-style-two .footer-widget-area .widget.getin-widget .widget-title {
  2392. color: #041d38;
  2393. }
  2394. footer.footer-style-two .footer-widget-area .widget.getin-widget .getin-btn {
  2395. font-family: "Oswald", sans-serif;
  2396. font-weight: 700;
  2397. font-size: 14px;
  2398. padding: 10px 45px;
  2399. text-transform: uppercase;
  2400. background-color: #041d38;
  2401. display: inline-block;
  2402. margin-top: 30px;
  2403. }
  2404. footer.footer-style-two .footer-widget-area .widget.getin-widget .getin-btn:hover {
  2405. background-color: #041d38;
  2406. color: #fff;
  2407. }
  2408. footer.footer-style-two .copy-right-area {
  2409. background-color: #021529;
  2410. padding: 15px 0;
  2411. }
  2412. @media (max-width: 767px) {
  2413. footer.footer-style-two .copy-right-area {
  2414. padding: 20px 0;
  2415. }
  2416. }
  2417. footer.footer-style-two .copy-right-area .copyrigt-text {
  2418. padding: 0;
  2419. border: none;
  2420. }
  2421. @media (max-width: 767px) {
  2422. footer.footer-style-two .copy-right-area .social-icon {
  2423. margin-top: 15px;
  2424. }
  2425. }
  2426. footer.footer-style-two .copy-right-area .social-icon a {
  2427. background-color: #041d38;
  2428. }
  2429. footer.footer-style-three {
  2430. background-color: #fff;
  2431. }
  2432. footer.footer-style-three .footer-top {
  2433. background-color: #f7fcff;
  2434. }
  2435. footer.footer-style-three .footer-top .social-icon a {
  2436. background-color: #fff;
  2437. color: #041d38;
  2438. }
  2439. footer.footer-style-three .footer-top .social-icon a:hover {
  2440. background-color: #639BFF;
  2441. }
  2442. footer.footer-style-three .footer-widget-area .widget,
  2443. footer.footer-style-three .footer-widget-area .widget a {
  2444. color: #041d38;
  2445. }
  2446. footer.footer-style-three .footer-widget-area .widget a:hover {
  2447. color: #639BFF;
  2448. }
  2449. footer.footer-style-three .footer-widget-area .widget .widget-title {
  2450. color: #041d38;
  2451. }
  2452. footer.footer-style-three .footer-widget-area .widget.recent-post .post-loop .post {
  2453. border-color: #f2f3f4;
  2454. }
  2455. footer.footer-style-three .footer-widget-area .widget.recent-post .post-loop .post .time {
  2456. color: #639BFF;
  2457. }
  2458. footer.footer-style-three .copy-right-area .copyrigt-text {
  2459. color: #041d38;
  2460. border-color: #d8e0e9;
  2461. }
  2462. footer.footer-style-three .copy-right-area a {
  2463. color: #041d38;
  2464. }
  2465. footer.footer-style-three .copy-right-area a:hover {
  2466. color: #639BFF;
  2467. }
  2468. /*===== Go Top =====*/
  2469. .go-top-area {
  2470. position: relative;
  2471. z-index: 9999;
  2472. }
  2473. .go-top-area .go-top {
  2474. position: fixed;
  2475. cursor: pointer;
  2476. top: 0;
  2477. right: 24px;
  2478. color: #ffffff;
  2479. background-color: #639BFF;
  2480. z-index: 9999;
  2481. width: 40px;
  2482. text-align: center;
  2483. height: 42px;
  2484. line-height: 42px;
  2485. opacity: 0;
  2486. visibility: hidden;
  2487. -webkit-transition: all 0.9s ease-out 0s;
  2488. transition: all 0.9s ease-out 0s;
  2489. border-right: 0;
  2490. }
  2491. .go-top-area .go-top i {
  2492. position: absolute;
  2493. top: 50%;
  2494. left: -4px;
  2495. right: 0;
  2496. margin: 0 auto;
  2497. font-size: 15px;
  2498. -webkit-transform: translateY(-50%);
  2499. transform: translateY(-50%);
  2500. -webkit-transition: all 0.5s ease-out 0s;
  2501. transition: all 0.5s ease-out 0s;
  2502. }
  2503. .go-top-area .go-top i:last-child {
  2504. opacity: 0;
  2505. visibility: hidden;
  2506. top: 60%;
  2507. }
  2508. .go-top-area .go-top::before {
  2509. content: '';
  2510. position: absolute;
  2511. top: 0;
  2512. left: 0;
  2513. width: 100%;
  2514. height: 100%;
  2515. z-index: -1;
  2516. background-color: #639BFF;
  2517. opacity: 0;
  2518. visibility: hidden;
  2519. -webkit-transition: all 0.5s ease-out 0s;
  2520. transition: all 0.5s ease-out 0s;
  2521. }
  2522. .go-top-area .go-top:focus,
  2523. .go-top-area .go-top:hover {
  2524. color: #fff;
  2525. }
  2526. .go-top-area .go-top:focus::before,
  2527. .go-top-area .go-top:hover::before {
  2528. opacity: 1;
  2529. visibility: visible;
  2530. }
  2531. .go-top-area .go-top:focus i:first-child,
  2532. .go-top-area .go-top:hover i:first-child {
  2533. opacity: 0;
  2534. top: 0;
  2535. visibility: hidden;
  2536. }
  2537. .go-top-area .go-top:focus i:last-child,
  2538. .go-top-area .go-top:hover i:last-child {
  2539. opacity: 1;
  2540. visibility: visible;
  2541. top: 50%;
  2542. }
  2543. .go-top-area .go-top.active {
  2544. top: 98%;
  2545. -webkit-transform: translateY(-98%);
  2546. transform: translateY(-98%);
  2547. opacity: 1;
  2548. visibility: visible;
  2549. border-radius: 0;
  2550. right: 20px;
  2551. }
  2552. @media only screen and (min-width: 992px) and (max-width: 1200px) {
  2553. .go-top-area .go-top.active {
  2554. top: 93%;
  2555. }
  2556. }
  2557. @media only screen and (min-width: 768px) and (max-width: 991px) {
  2558. .go-top-area .go-top.active {
  2559. top: 93%;
  2560. }
  2561. }
  2562. .go-top-wrap {
  2563. position: relative;
  2564. }
  2565. .go-top-wrap .go-top-btn {
  2566. display: inline-block;
  2567. width: 40px;
  2568. height: 40px;
  2569. line-height: 40px;
  2570. text-align: center;
  2571. color: #fff;
  2572. top: 3px;
  2573. z-index: 1;
  2574. background: #639BFF;
  2575. }
  2576. .go-top-wrap .go-top-btn i {
  2577. font-size: 20px;
  2578. font-weight: 700;
  2579. padding-left: 4px;
  2580. color: #fff;
  2581. }
  2582. .go-top-wrap .go-top-btn::after {
  2583. z-index: -1;
  2584. content: '';
  2585. position: absolute;
  2586. left: 0;
  2587. top: 0;
  2588. width: 40px;
  2589. height: 40px;
  2590. -webkit-animation: ripple 1.6s ease-out infinite;
  2591. animation: ripple 1.6s ease-out infinite;
  2592. opacity: 0;
  2593. background: #639BFF;
  2594. }
  2595. .go-top-wrap .go-top-btn:hover {
  2596. background-color: #000;
  2597. color: #fff;
  2598. }
  2599. /*===========================
  2600. Solution
  2601. ===========================*/
  2602. .solution-section {
  2603. position: relative;
  2604. /* background-color: #f7fcff; */
  2605. }
  2606. .solution-section .solution-content {
  2607. font-size: 25px;
  2608. }
  2609. .solution-section .solution-btn {
  2610. border: #2a2e78 1px solid;
  2611. padding: 5px 40px;
  2612. font-weight: 600;
  2613. color: #2a2e78;
  2614. cursor: pointer;
  2615. }
  2616. .solution-section .solution-btn:hover {
  2617. color: #639BFF;
  2618. border: #639BFF 1px solid;
  2619. }
  2620. /*===========================
  2621. Core Product
  2622. ===========================*/
  2623. .coreproduct-section {
  2624. position: relative;
  2625. }
  2626. .coreproduct-section .grid_titlle {
  2627. height: 45px;
  2628. background-color: #2a2e78;
  2629. color: white;
  2630. font-size: 20px;
  2631. text-align: center;
  2632. }
  2633. .coreproduct-section .grid_item {
  2634. margin-top: 20px;
  2635. }
  2636. .coreproduct-section .grid_item>div {
  2637. height: 470px;
  2638. }
  2639. .coreproduct-section .grid_img {
  2640. height: 252px;
  2641. overflow: hidden;
  2642. }
  2643. .coreproduct-section .grid_img>div {
  2644. height: 252px;
  2645. background-size: cover;
  2646. background-position: center center;
  2647. -webkit-transition: 0.3s;
  2648. transition: 0.3s;
  2649. }
  2650. .coreproduct-section .grid_img>div:hover {
  2651. -webkit-transform: scale(1.05, 1.05);
  2652. transform: scale(1.05, 1.05);
  2653. }
  2654. .coreproduct-section .grid_item p {
  2655. font-size: 16px;
  2656. text-indent: 25px;
  2657. padding: 15px 15px 0;
  2658. }
  2659. .coreproduct-section .grid_item .grid_button {
  2660. margin-right: 15px;
  2661. color: #2a2e78;
  2662. padding-bottom: 20px;
  2663. font-weight: 600;
  2664. }
  2665. /*===========================
  2666. About Two
  2667. ===========================*/
  2668. .abouttwo-section {
  2669. position: relative;
  2670. }
  2671. .abouttwo-section .abouttwo_item {
  2672. width: 50%;
  2673. height: 506px;
  2674. }
  2675. .abouttwo-section .abouttwo_content {
  2676. padding: 0 40px 40px;
  2677. background-color: #2a2e78;
  2678. }
  2679. .abouttwo-section .abouttwo_content>span {
  2680. color: white;
  2681. padding: 45px;
  2682. font-size: 40px;
  2683. }
  2684. .abouttwo-section .abouttwo_content p {
  2685. color: white;
  2686. font-size: 18px;
  2687. text-indent: 30px;
  2688. line-height: 1.9;
  2689. }
  2690. .abouttwo-section .abouttwo_content a {
  2691. color: white;
  2692. font-size: 16px;
  2693. cursor: pointer;
  2694. }
  2695. .abouttwo-section .abouttwo_content a:hover {
  2696. color: #639BFF;
  2697. }
  2698. .abouttwo-section .abouttwo_img {
  2699. background-size: cover;
  2700. background-position: center center;
  2701. background-repeat: no-repeat;
  2702. }
  2703. @media (max-width: 774px) {
  2704. .abouttwo-section .abouttwo_item {
  2705. width: 100%;
  2706. height: 506px;
  2707. }
  2708. }
  2709. @media only screen and (min-width: 774px) and (max-width: 1120px) {
  2710. .abouttwo-section .abouttwo_content p {
  2711. color: white;
  2712. font-size: 16px;
  2713. text-indent: 30px;
  2714. line-height: 1.6;
  2715. }
  2716. }
  2717. @media (max-width:570px) {
  2718. .abouttwo-section .abouttwo_content>span {
  2719. color: white;
  2720. padding: 30px 45px;
  2721. font-size: 40px;
  2722. }
  2723. }
  2724. @media (max-width:445px) {
  2725. .abouttwo-section .abouttwo_content>span {
  2726. color: white;
  2727. padding: 25px 30px;
  2728. font-size: 35px;
  2729. }
  2730. .abouttwo-section .abouttwo_content {
  2731. padding: 0 30px 30px;
  2732. }
  2733. .abouttwo-section .abouttwo_content p {
  2734. color: white;
  2735. font-size: 16px;
  2736. text-indent: 30px;
  2737. line-height: 1.9;
  2738. }
  2739. }
  2740. @media (max-width:321px) {
  2741. .abouttwo-section .abouttwo_content {
  2742. height: 526px;
  2743. }
  2744. }
  2745. /*===========================
  2746. Classic Case
  2747. ===========================*/
  2748. .classic-case-section {
  2749. position: relative;
  2750. }
  2751. .classic-case-section .case-img {
  2752. position: relative;
  2753. z-index: 1;
  2754. }
  2755. @media only screen and (min-width: 768px) and (max-width: 991px) {
  2756. .classic-case-section .case-img {
  2757. margin-top: 60px;
  2758. }
  2759. }
  2760. @media (max-width: 767px) {
  2761. .classic-case-section .case-img {
  2762. margin-top: 60px;
  2763. }
  2764. }
  2765. .classic-case-section .case-img::after {
  2766. position: absolute;
  2767. right: -25px;
  2768. bottom: -25px;
  2769. width: 180px;
  2770. height: 180px;
  2771. background-color: #2a2e78;
  2772. content: '';
  2773. -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
  2774. clip-path: polygon(100% 0, 0 100%, 100% 100%);
  2775. z-index: -1;
  2776. }
  2777. .classic-case-section .case-left {
  2778. position: relative;
  2779. z-index: 1;
  2780. margin-top: 26px;
  2781. height: 100%;
  2782. }
  2783. .classic-case-section .case-left h1,
  2784. strong {
  2785. color: #2a2e78;
  2786. }
  2787. .classic-case-section .case-left a {
  2788. color: #2a2e78;
  2789. font-size: 20px;
  2790. text-decoration: underline;
  2791. padding-bottom: 15px;
  2792. cursor: pointer;
  2793. }
  2794. .classic-case-section .case-left a:hover {
  2795. color: #639BFF;
  2796. }
  2797. .classic-case-section .case-left::before {
  2798. position: absolute;
  2799. top: -26px;
  2800. width: 180px;
  2801. height: 180px;
  2802. background-color: #2a2e78;
  2803. content: '';
  2804. -webkit-clip-path: polygon(100% 0, 0% 100%, 0 0);
  2805. clip-path: polygon(100% 0, 0% 100%, 0 0);
  2806. z-index: -1;
  2807. }
  2808. .classic-case-section .case-left h1 {
  2809. font-size: 30px;
  2810. padding: 20px 0;
  2811. }
  2812. .classic-case-section .case-left p {
  2813. font-size: 16px;
  2814. padding: 20px 0 0 0;
  2815. text-indent: 30px;
  2816. }
  2817. .classic-case-section .section-title h2 {
  2818. background-color: #2a2e78;
  2819. color: white;
  2820. padding: 10px 0;
  2821. line-height: 1.5;
  2822. width: 300px;
  2823. }
  2824. /*===========================
  2825. Sub Company
  2826. ===========================*/
  2827. .sub-company-section {
  2828. position: relative;
  2829. background-image: url(../img/sub_company_bg.png);
  2830. background-position: center center;
  2831. background-repeat: no-repeat;
  2832. background-size: cover;
  2833. height: 1081px;
  2834. }
  2835. @media (max-width: 575px) {
  2836. .sub-company-section {
  2837. position: relative;
  2838. background-image: none;
  2839. height: 100%;
  2840. }
  2841. }
  2842. .sub-company-section .icon {
  2843. width: 25px;
  2844. height: 25px;
  2845. fill: currentColor;
  2846. overflow: hidden;
  2847. }
  2848. .sub-company-section .phone {
  2849. margin-top: 20px;
  2850. }
  2851. .sub-company-section hr {
  2852. margin-top: 30px;
  2853. }
  2854. .sub-company-section .company-short-name {
  2855. width: 100px;
  2856. }
  2857. .sub-company-section .company-name {
  2858. width: 300px;
  2859. text-align: right;
  2860. }
  2861. @media (max-width: 490px) {
  2862. .sub-company-section .company-name {
  2863. width: 180px;
  2864. text-align: right;
  2865. }
  2866. }
  2867. @media (max-width: 320px) {
  2868. .sub-company-section .company-name {
  2869. width: 150px;
  2870. text-align: right;
  2871. }
  2872. }
  2873. /*===========================
  2874. Custom Contact
  2875. ===========================*/
  2876. .cus-contact-section {
  2877. position: relative;
  2878. }
  2879. .cus-contact-section .contact-btn {
  2880. text-align: center;
  2881. height: 80px;
  2882. width: 480px;
  2883. border-radius: 40px;
  2884. position: relative;
  2885. }
  2886. .cus-contact-section .contact-btn span {
  2887. font-size: 30px;
  2888. }
  2889. .cus-contact-section h2 {
  2890. font-weight: 400;
  2891. color: #2a2e78;
  2892. }
  2893. .cus-contact-section h1 {
  2894. letter-spacing: 10px;
  2895. font-weight: 400;
  2896. color: #2a2e78;
  2897. }
  2898. .cus-contact-section p {
  2899. font-size: 16px;
  2900. font-weight: 500;
  2901. }
  2902. .cus-contact-section .contact-btn::after {
  2903. content: url("../img/contact.png");
  2904. position: absolute;
  2905. left: 400px;
  2906. top: 2px;
  2907. color: #2a2e78
  2908. }
  2909. .cus-contact-section .contact-btn span {
  2910. color: #2a2e78;
  2911. }
  2912. @media (max-width: 575px) {
  2913. .cus-contact-section .contact-btn {
  2914. width: 380px;
  2915. }
  2916. .cus-contact-section .contact-btn::after {
  2917. left: 300px;
  2918. }
  2919. }
  2920. /*===========================
  2921. News Breadcrumb
  2922. ===========================*/
  2923. .news-breadcrumb-section {
  2924. position: relative;
  2925. background-position: center center;
  2926. background-repeat: no-repeat;
  2927. background-size: cover;
  2928. }
  2929. .news-breadcrumb-section img {
  2930. max-height: 89px;
  2931. max-width: 480px;
  2932. }
  2933. @media (max-width: 575px) {
  2934. .news-breadcrumb-section {
  2935. height: 370px;
  2936. padding-top: 200px;
  2937. }
  2938. .news-breadcrumb-section img {
  2939. max-height: 62px;
  2940. max-width: 336px;
  2941. }
  2942. }
  2943. /*===========================
  2944. News Content
  2945. ===========================*/
  2946. .news-content-section {
  2947. position: relative;
  2948. /* background-color: #f6f6fe; */
  2949. }
  2950. .news-content-section .menu-1 {
  2951. color: white;
  2952. font-size: 24px;
  2953. padding: 0 0;
  2954. text-align: center
  2955. }
  2956. .news-content-section .menu-1 .title {
  2957. background-color: #2a2e78;
  2958. padding: 15px 0 15px 15px;
  2959. }
  2960. .news-content-section .menu-1 ul li {
  2961. color: #202A67;
  2962. /* background-color: #e0e0f8; */
  2963. font-size: 20px;
  2964. cursor: pointer;
  2965. display: inline-block;
  2966. position: relative;
  2967. margin-bottom: 37px;
  2968. }
  2969. .news-content-section .menu-1 ul li a {
  2970. padding: 12px 30px;
  2971. width: 100%;
  2972. color: #333
  2973. }
  2974. .news-content-section .menu-1 .unactive {
  2975. padding: 10px 0 10px 31px;
  2976. }
  2977. .news-content-section .menu-1 ul {
  2978. padding: 0px 15px;
  2979. }
  2980. .news-content-section .menu-1 ul .active a {
  2981. cursor: default;
  2982. color: #202A67;
  2983. }
  2984. .news-content-section .menu-1 ul .active::before {
  2985. content: "";
  2986. color: #2a2e78;
  2987. width: 100%;
  2988. height: 2px;
  2989. background: #202A67;
  2990. position: absolute;
  2991. bottom: 0;
  2992. }
  2993. .news-content-section .menu-2 {
  2994. display: none;
  2995. }
  2996. .news-content-section .menu-2 li {
  2997. display: inline-block;
  2998. width: 50%;
  2999. text-align: center;
  3000. font-size: 20px;
  3001. color: #2a2e78;
  3002. padding: 10px 0;
  3003. background-color: #e0e0f8;
  3004. cursor: pointer;
  3005. }
  3006. .news-content-section .menu-2 li.active {
  3007. background-color: #2a2e78;
  3008. color: white;
  3009. cursor: default;
  3010. }
  3011. @media (max-width: 768px) {
  3012. .news-content-section .menu-1 {
  3013. display: none;
  3014. }
  3015. .news-content-section .menu-2 {
  3016. display: block;
  3017. }
  3018. }
  3019. .news-content-section .content li {
  3020. /* border-bottom: 1px solid #E6E6E6; */
  3021. margin-left: 0;
  3022. margin-right: 0;
  3023. padding: 25px;
  3024. position: relative
  3025. }
  3026. .news-content-section .content li:before {
  3027. content: "";
  3028. /* color: #2a2e78; */
  3029. margin-right: 10px;
  3030. width: calc(100% - 30px);
  3031. height: 1px;
  3032. background: #E6E6E6;
  3033. position: absolute;
  3034. bottom: 0;
  3035. }
  3036. .news-content-section .content li:hover {
  3037. background-color: #F5F5F5;
  3038. }
  3039. .news-content-section .content li:hover .more {
  3040. background: #CCCCCC;
  3041. color: #fff;
  3042. }
  3043. .news-content-section .content li:hover::before {
  3044. height: 0
  3045. }
  3046. .news-content-section .content .img {
  3047. background-position: center center;
  3048. background-repeat: no-repeat;
  3049. background-size: cover;
  3050. height: 169px;
  3051. }
  3052. .news-content-section .content .hr1 a {
  3053. font-size: 18px;
  3054. overflow: hidden;
  3055. text-overflow: ellipsis;
  3056. white-space: nowrap;
  3057. color: #333;
  3058. width: 100%
  3059. }
  3060. .news-content-section .content .hr1 span {
  3061. min-width: 80px;
  3062. font-size: 14px;
  3063. color: #969696;
  3064. display: block;
  3065. margin-bottom: 10px;
  3066. }
  3067. @media (max-width: 575px) {
  3068. .news-content-section .content .hr1 {
  3069. margin-top: 15px;
  3070. }
  3071. }
  3072. .news-content-section .content .hr2 {
  3073. color: #666;
  3074. font-size: 14px;
  3075. }
  3076. .news-content-section .content .hr3 .more {
  3077. color: #333;
  3078. text-align: center;
  3079. font-size: 15px;
  3080. border: 1px solid #E6E6E6;
  3081. margin-top: 15px;
  3082. padding: 8px 23px;
  3083. cursor: pointer;
  3084. }
  3085. /* .news-content-section .content .hr3 .more:hover {
  3086. color: #639BFF;
  3087. width: 180px;
  3088. text-align: center;
  3089. font-size: 23px;
  3090. height: 40px;
  3091. border: #639BFF 1px solid;
  3092. border-radius: 20px;
  3093. margin-top: 15px;
  3094. } */
  3095. .news-content-section .content .page a {
  3096. background-color: #DFEBFF;
  3097. margin-right: 5px;
  3098. font-size: 12px;
  3099. color: #646464;
  3100. font-weight: bold;
  3101. border: #90BBFF 2px solid;
  3102. padding: 6px 12px;
  3103. cursor: pointer;
  3104. box-sizing: content-box;
  3105. border-radius: 2px;
  3106. }
  3107. .news-content-section .content .page a:hover,
  3108. .news-content-section .content .page a.active {
  3109. color: white;
  3110. font-weight: bold;
  3111. border: 2px solid rgba(0, 0, 0, 0);
  3112. background-color: #90BBFF;
  3113. }
  3114. .news-content-section .content .page a.previous,
  3115. .news-content-section .content .page a.next {
  3116. padding: 6px 12px;
  3117. }
  3118. .news-content-section .content .page span {
  3119. margin: 0 5px;
  3120. }
  3121. .news-content-section .content .page a.disable {
  3122. color: #757a89;
  3123. border: none;
  3124. background-color: white;
  3125. border: #757a89 1px solid;
  3126. cursor: default;
  3127. }
  3128. @media (max-width: 575px) {
  3129. .news-content-section .content .page span {
  3130. display: none;
  3131. }
  3132. .news-content-section .content .page a {
  3133. display: none;
  3134. }
  3135. .news-content-section .content .page a.previous,
  3136. .news-content-section .content .page a.next {
  3137. display: inline-block;
  3138. }
  3139. .news-content-section .content .page a.previous {
  3140. margin-right: 150px;
  3141. }
  3142. }
  3143. .news-content-section .content .read_content {
  3144. background-color: white;
  3145. /* padding: 30px 20px; */
  3146. }
  3147. .news-content-section .content .read_content .new-read-title h1 {
  3148. text-align: center;
  3149. font-size: 24px;
  3150. font-weight: 600;
  3151. }
  3152. .news-content-section .content .read_content .new-read-title2 {
  3153. padding: 25px 0;
  3154. max-width: 800px;
  3155. margin: 0 auto
  3156. }
  3157. .news-content-section .content .read_content .new-read-title2 span {
  3158. font-size: 14px;
  3159. color: #999;
  3160. }
  3161. .news-content-section .content .read-page {
  3162. padding: 80px 0 30px;
  3163. color: #666
  3164. }
  3165. .news-content-section .content .read-page a {
  3166. margin-right: 5px;
  3167. padding: 5px 10px;
  3168. border: 1px solid #666;
  3169. font-size: 14px;
  3170. color: #666;
  3171. /* text-decoration: underline; */
  3172. cursor: pointer;
  3173. overflow: hidden;
  3174. text-overflow: ellipsis;
  3175. white-space: nowrap;
  3176. }
  3177. .news-content-section .content .read-page a.disable {
  3178. color: #757a89;
  3179. cursor: default;
  3180. }
  3181. .news-content-section .content .read-page a:hover {
  3182. color: #639BFF;
  3183. }
  3184. .news-content-section .content .read-page a.disable:hover {
  3185. color: #757a89;
  3186. cursor: default;
  3187. }
  3188. .news-content-section .content .read-page a.previous,
  3189. .news-content-section .content .read-page a.next {
  3190. max-width: 280px;
  3191. }
  3192. .news-content-section .content .read-page a.min-previous,
  3193. .news-content-section .content .read-page a.min-next {
  3194. display: none;
  3195. }
  3196. @media (max-width: 989px) {
  3197. .news-content-section .content .read-page a.min-previous,
  3198. .news-content-section .content .read-page a.min-next {
  3199. display: inline-block;
  3200. }
  3201. .news-content-section .content .read-page a.previous,
  3202. .news-content-section .content .read-page a.next {
  3203. display: none;
  3204. }
  3205. }
  3206. .news-content-section .menu-1 ul.related li {
  3207. padding: 0;
  3208. color: #2a2e78;
  3209. margin-bottom: 2px;
  3210. background-color: white;
  3211. font-size: 20px;
  3212. cursor: pointer;
  3213. }
  3214. .news-content-section .menu-1 ul.related li a {
  3215. padding: 13px 0 7px 10px;
  3216. overflow: hidden;
  3217. text-overflow: ellipsis;
  3218. white-space: nowrap;
  3219. width: 100%;
  3220. color: #2a2e78;
  3221. }
  3222. .news-content-section .related2 {
  3223. display: none;
  3224. }
  3225. .news-content-section .related2 li {
  3226. padding: 0;
  3227. color: #2a2e78;
  3228. margin-bottom: 2px;
  3229. background-color: white;
  3230. font-size: 20px;
  3231. cursor: pointer;
  3232. }
  3233. .news-content-section .related2 li a {
  3234. padding: 13px 0 7px 10px;
  3235. overflow: hidden;
  3236. text-overflow: ellipsis;
  3237. white-space: nowrap;
  3238. width: 100%;
  3239. color: #2a2e78;
  3240. }
  3241. .news-content-section .related2 .title {
  3242. background-color: #2a2e78;
  3243. padding: 15px 0 15px 15px;
  3244. color: white;
  3245. }
  3246. @media (max-width: 768px) {
  3247. .news-content-section .related2 {
  3248. display: block;
  3249. }
  3250. .news-content-section .content .read_content .new-read-title2 {
  3251. width: 50%;
  3252. min-width: 350px;
  3253. }
  3254. }
  3255. @media (min-width: 768px) {
  3256. .news-content-section .content .read_content .new-read-title2 {
  3257. text-align: center
  3258. }
  3259. }
  3260. /* 相关新闻 */
  3261. .relNewBox {
  3262. box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 15%);
  3263. /* height: 200px; */
  3264. margin: 20px 0 60px;
  3265. padding-top: 30px;
  3266. padding-bottom: 40px
  3267. }
  3268. .relNewBox li div {
  3269. display: inline-block
  3270. }
  3271. .relNewsList {
  3272. border-bottom: 1px solid #999;
  3273. color: #333;
  3274. margin-top: 5px;
  3275. padding-bottom: 3px
  3276. }
  3277. .relNewsList img {
  3278. display: inline-block;
  3279. margin-right: 10px;
  3280. }
  3281. .relNewsList div:first-child {
  3282. width: calc(100% - 100px)
  3283. }
  3284. .relNewsList div:last-child {
  3285. width: 90px;
  3286. text-align: right;
  3287. }
  3288. .relNewsList:hover {
  3289. border-bottom: 1px solid #639BFF;
  3290. }
  3291. /*===========================
  3292. Custom Banner
  3293. ===========================*/
  3294. .banner-section .bg-img {
  3295. background-size: cover;
  3296. background-position: center center;
  3297. background-repeat: no-repeat;
  3298. max-width: 100%;
  3299. height: 860px;
  3300. }
  3301. @media(max-width:1440px) {
  3302. .banner-section .bg-img {
  3303. height: 90vh;
  3304. max-height: 860px;
  3305. }
  3306. }
  3307. .banner-section .bannerContent0 {
  3308. margin-top: 320px;
  3309. }
  3310. .banner-section .bannerContent0 img:nth-child(1) {
  3311. max-width: 609px;
  3312. max-height: 97px;
  3313. }
  3314. .banner-section .bannerContent0 img:nth-child(2) {
  3315. margin-top: 50px;
  3316. max-width: 668px;
  3317. max-height: 112px;
  3318. }
  3319. @media (max-width: 780px) {
  3320. .banner-section .bg-img {
  3321. height: 470px;
  3322. }
  3323. .banner-section .bannerContent0 {
  3324. margin-top: 190px;
  3325. }
  3326. .banner-section .bannerContent0 img:nth-child(1) {
  3327. max-width: 304px;
  3328. max-height: 48px;
  3329. }
  3330. .banner-section .bannerContent0 img:nth-child(2) {
  3331. margin-top: 25px;
  3332. max-width: 334px;
  3333. max-height: 56px;
  3334. }
  3335. }
  3336. /*===========================
  3337. Common Breadcrumb
  3338. ===========================*/
  3339. .common-bradcrumb-section {
  3340. position: relative;
  3341. background-position: center center;
  3342. background-repeat: no-repeat;
  3343. background-size: cover;
  3344. }
  3345. /*===========================
  3346. Product Grid
  3347. ===========================*/
  3348. .product-grid-section {
  3349. position: relative;
  3350. /* background-color: #f6f6fe */
  3351. }
  3352. .product-grid-section .row-tabs {
  3353. margin-right: 0;
  3354. margin-left: 0;
  3355. }
  3356. .product-grid-section .grid-filter ul li {
  3357. display: inline-block;
  3358. height: 60px;
  3359. position: relative;
  3360. /* width: 14.28571428571429%; */
  3361. padding: 0 10px;
  3362. }
  3363. .product-grid-section .grid-isotope .software {
  3364. padding-right: 20px;
  3365. padding-left: 20px;
  3366. padding-bottom: 0px;
  3367. }
  3368. .product-grid-section .grid-filter ul li:nth-child(1) {
  3369. padding-left: 0;
  3370. padding-right: 10px;
  3371. }
  3372. .product-grid-section .grid-filter ul li:nth-child(7) {
  3373. padding-right: 0px;
  3374. padding-left: 10px;
  3375. }
  3376. .product-grid-section .grid-filter ul li div {
  3377. width: 100%;
  3378. height: 100%;
  3379. display: -ms-flexbox;
  3380. display: flex;
  3381. -ms-flex-pack: center;
  3382. justify-content: center;
  3383. -ms-flex-align: center;
  3384. align-items: center;
  3385. background-color: rgba(210, 227, 255, 1);
  3386. color: #2a2e78;
  3387. font-size: 16px;
  3388. font-weight: bold;
  3389. }
  3390. .product-grid-section .grid-filter ul li.active div,
  3391. .product-grid-section .grid-filter ul li div:hover {
  3392. background-color: rgba(99, 155, 255, 1);
  3393. color: white;
  3394. cursor: pointer;
  3395. }
  3396. @media (min-width: 1200px) {
  3397. .product-grid-section .grid-filter ul li span {
  3398. padding: 0px 18.3px;
  3399. }
  3400. }
  3401. @media (max-width: 1200px) {
  3402. .product-grid-section .grid-filter ul li {
  3403. width: 14.28571428571429%;
  3404. }
  3405. .product-grid-section .grid-filter ul li span {
  3406. padding: 0px 0px;
  3407. }
  3408. .product-grid-section .grid-filter ul li div {
  3409. text-align: center;
  3410. }
  3411. }
  3412. @media (max-width: 999px) {
  3413. .product-grid-section .grid-filter ul li {
  3414. width: 24.999999%;
  3415. margin-top: 2px;
  3416. }
  3417. .product-grid-section .grid-filter ul li:nth-child(4) {
  3418. padding-left: 10px;
  3419. padding-right: 0;
  3420. }
  3421. .product-grid-section .grid-filter ul li:nth-child(5) {
  3422. padding-left: 0;
  3423. padding-right: 10px;
  3424. }
  3425. .product-grid-section .grid-filter ul li:nth-child(7) {
  3426. padding-left: 10px;
  3427. padding-right: 10px;
  3428. }
  3429. }
  3430. @media (max-width: 575px) {
  3431. .product-grid-section .grid-filter ul li {
  3432. width: 49.99999%;
  3433. margin-top: 2px;
  3434. padding: 0;
  3435. }
  3436. .product-grid-section .grid-filter ul li:nth-child(3),
  3437. .product-grid-section .grid-filter ul li:nth-child(7) {
  3438. padding-left: 0px;
  3439. padding-right: 10px;
  3440. }
  3441. .product-grid-section .grid-filter ul li:nth-child(4) {
  3442. padding-left: 0px;
  3443. padding-right: 0;
  3444. }
  3445. }
  3446. .product-grid-section .grid-isotope {
  3447. background-color: white;
  3448. }
  3449. .product-grid-section .grid-isotope .product-grid-box {
  3450. margin: 20px 0;
  3451. /* border: #8386d5 2px solid; */
  3452. border-radius: 5px;
  3453. position: relative;
  3454. box-shadow: 0px 2px 17px 4px rgba(158, 158, 158, 0.15);
  3455. }
  3456. .product-grid-section .grid-isotope .product-grid-box .product-img {
  3457. padding: 30px 0;
  3458. overflow: hidden;
  3459. z-index: -2;
  3460. }
  3461. .product-grid-section .grid-isotope .product-grid-box .product-img img {
  3462. height: 250px;
  3463. max-width: 250px;
  3464. margin: 0 auto;
  3465. display: block;
  3466. }
  3467. .product-grid-section .grid-isotope .product-grid-box .title {
  3468. height: 80px;
  3469. /* background-color: #8386d5; */
  3470. color: #000;
  3471. z-index: -2;
  3472. padding: 0 10px;
  3473. text-align: center;
  3474. }
  3475. .product-grid-section .grid-isotope .product-grid-box .title span {
  3476. color: #000;
  3477. font-size: 20px;
  3478. overflow: hidden;
  3479. text-overflow: ellipsis;
  3480. white-space: nowrap;
  3481. font-weight: bold;
  3482. }
  3483. .product-grid-section .grid-isotope .product-grid-box .title div {
  3484. color: #000;
  3485. font-size: 16px;
  3486. overflow: hidden;
  3487. text-overflow: ellipsis;
  3488. white-space: nowrap;
  3489. padding: 0 40px;
  3490. }
  3491. .product-grid-section .grid-isotope .product-grid-box .product-link {
  3492. position: absolute;
  3493. top: 45%;
  3494. /* -webkit-transform: translate(0%, -50%);
  3495. transform: translate(0%, -50%); */
  3496. width: 100%;
  3497. -webkit-transition: all 0.3s ease-out 0s;
  3498. transition: all 0.3s ease-out 0s;
  3499. color: #fff;
  3500. font-size: 40px;
  3501. z-index: 2;
  3502. opacity: 0;
  3503. visibility: hidden;
  3504. }
  3505. .product-grid-section .grid-isotope .product-grid-box .product-link p {
  3506. font-size: 18px;
  3507. text-align: center;
  3508. }
  3509. .product-grid-section .grid-isotope .product-grid-box::after {
  3510. content: '';
  3511. position: absolute;
  3512. left: 0;
  3513. top: 0;
  3514. width: 100%;
  3515. height: 100%;
  3516. background-color: #041d38;
  3517. z-index: 1;
  3518. -webkit-transition: all 0.3s ease-out 0s;
  3519. transition: all 0.3s ease-out 0s;
  3520. opacity: 0;
  3521. visibility: hidden;
  3522. }
  3523. .product-grid-section .grid-isotope .product-grid-box:hover::after {
  3524. opacity: 0.9;
  3525. visibility: visible;
  3526. }
  3527. .product-grid-section .grid-isotope .product-grid-box:hover .product-link {
  3528. opacity: 1;
  3529. visibility: visible;
  3530. }
  3531. /*===========================
  3532. Product Detail
  3533. ===========================*/
  3534. .product-detial-section {
  3535. position: relative;
  3536. background-color: #f6f6fe;
  3537. }
  3538. .product-detial-section .up-level-page a {
  3539. color: #2a2e78;
  3540. font-size: 22px;
  3541. text-decoration: underline;
  3542. cursor: pointer;
  3543. }
  3544. .product-detial-section .up-level-page a:hover {
  3545. color: #639BFF;
  3546. }
  3547. .product-detial-section .article {
  3548. background-color: white;
  3549. padding: 0 45px;
  3550. }
  3551. @media (max-width: 575px) {
  3552. .product-detial-section .article {
  3553. padding: 0 5px;
  3554. }
  3555. }
  3556. .product-detial-section .article .title h1 {
  3557. font-size: 30px;
  3558. font-weight: 500;
  3559. color: #010432;
  3560. text-align: center;
  3561. }
  3562. .product-detial-section .article h2 {
  3563. font-size: 24px;
  3564. font-weight: 400;
  3565. color: #2a2e78;
  3566. border-left: 8px #2a2e78 solid;
  3567. }
  3568. .product-detial-section .article .fun-box .img-box {
  3569. overflow: hidden;
  3570. float: right;
  3571. }
  3572. .product-detial-section .article .fun-box .img-box img {
  3573. height: 250px;
  3574. max-width: 250px;
  3575. }
  3576. .product-detial-section .article .fun-box p {
  3577. padding-bottom: 10px;
  3578. font-size: 16px;
  3579. color: #010432;
  3580. }
  3581. .product-detial-section .article .fun-box p::before {
  3582. content: "■";
  3583. color: #010432;
  3584. margin-right: 10px;
  3585. }
  3586. .product-detial-section .article .params-box {
  3587. border: #8386d5 solid;
  3588. border-width: 0 1px 0 1px;
  3589. }
  3590. @media (max-width: 1007px) {
  3591. .product-detial-section .article .params-box {
  3592. overflow-x: auto;
  3593. }
  3594. }
  3595. .product-detial-section .article .params-box table {
  3596. width: 100%;
  3597. min-width: 768px;
  3598. border: #8386d5 solid;
  3599. border-width: 1px 0 0 0;
  3600. }
  3601. .product-detial-section .article .params-box table th {
  3602. background-color: #e0e0f8;
  3603. padding: 0 10px;
  3604. height: 50px;
  3605. }
  3606. .product-detial-section .article .params-box table th:nth-child(1) {
  3607. border: #8386d5 solid;
  3608. border-width: 0 1px 1px 0;
  3609. }
  3610. .product-detial-section .article .params-box table th:nth-child(2) {
  3611. border: #8386d5 solid;
  3612. border-width: 0 0 1px 0;
  3613. }
  3614. .product-detial-section .article .params-box table th:nth-child(3) {
  3615. border: #8386d5 solid;
  3616. border-width: 0 0 1px 1px;
  3617. }
  3618. .product-detial-section .article .params-box table th:nth-child(4) {
  3619. border: #8386d5 solid;
  3620. border-width: 0 0 1px 1px;
  3621. }
  3622. .product-detial-section .article .params-box table th span {
  3623. display: inline-block;
  3624. }
  3625. .product-detial-section .article .params-box table th span:nth-child(2) {
  3626. display: inline-block;
  3627. font-weight: 400;
  3628. font-size: 14px;
  3629. }
  3630. .product-detial-section .article .params-box table td {
  3631. padding: 0 10px;
  3632. height: 50px;
  3633. }
  3634. .product-detial-section .article .params-box table td:nth-child(1) {
  3635. border: #8386d5 solid;
  3636. border-width: 0 1px 1px 0;
  3637. }
  3638. .product-detial-section .article .params-box table td:nth-child(2) {
  3639. border: #8386d5 solid;
  3640. border-width: 0 0 1px 0;
  3641. }
  3642. .product-detial-section .article .params-box table td:nth-child(3) {
  3643. border: #8386d5 solid;
  3644. border-width: 0 0 1px 1px;
  3645. }
  3646. .product-detial-section .article .params-box table td:nth-child(4) {
  3647. border: #8386d5 solid;
  3648. border-width: 0 0 1px 1px;
  3649. }
  3650. .product-detial-section .page a {
  3651. color: #2a2e78;
  3652. font-size: 22px;
  3653. text-decoration: underline;
  3654. cursor: pointer;
  3655. overflow: hidden;
  3656. text-overflow: ellipsis;
  3657. white-space: nowrap;
  3658. max-width: 415px;
  3659. }
  3660. .product-detial-section .page a:hover {
  3661. color: #639BFF;
  3662. }
  3663. /*===========================
  3664. Solution Page
  3665. ===========================*/
  3666. .solution-page-section {
  3667. position: relative;
  3668. background-color: #f6f6fe;
  3669. }
  3670. .solution-page-section .tab-menu-1 {
  3671. color: white;
  3672. font-size: 24px;
  3673. padding: 0 0;
  3674. }
  3675. .solution-page-section .tab-menu-1 .title {
  3676. background-color: #2a2e78;
  3677. padding: 15px 0 15px 15px;
  3678. }
  3679. .solution-page-section .tab-menu-1 ul li {
  3680. color: #2a2e78;
  3681. margin-bottom: 2px;
  3682. background-color: #e0e0f8;
  3683. font-size: 18px;
  3684. cursor: pointer;
  3685. }
  3686. .solution-page-section .tab-menu-1 ul li a {
  3687. color: #2a2e78;
  3688. padding: 10px 0 10px 31px;
  3689. width: 100%;
  3690. height: 100%;
  3691. }
  3692. .solution-page-section .tab-menu-1 ul .active {
  3693. padding: 10px 0 10px 15px;
  3694. cursor: default;
  3695. }
  3696. .solution-page-section .tab-menu-1 ul .active::before {
  3697. content: "▪";
  3698. color: #2a2e78;
  3699. margin-right: 10px;
  3700. }
  3701. .solution-page-section .tab-menu-2 {
  3702. display: none;
  3703. }
  3704. .solution-page-section .tab-menu-2 ul li {
  3705. display: inline-block;
  3706. text-align: center;
  3707. font-size: 18px;
  3708. cursor: pointer;
  3709. height: 60px;
  3710. margin-bottom: 2px;
  3711. }
  3712. .solution-page-section .tab-menu-2 ul li:nth-child(1),
  3713. .solution-page-section .tab-menu-2 ul li:nth-child(3) {
  3714. padding-right: 5px;
  3715. padding-left: 0;
  3716. }
  3717. .solution-page-section .tab-menu-2 ul li:nth-child(2),
  3718. .solution-page-section .tab-menu-2 ul li:nth-child(4) {
  3719. padding-left: 5px;
  3720. padding-right: 0;
  3721. }
  3722. .solution-page-section .tab-menu-2 ul li a {
  3723. color: #2a2e78;
  3724. width: 100%;
  3725. height: 100%;
  3726. line-height: 60px;
  3727. background-color: #e0e0f8;
  3728. }
  3729. .solution-page-section .tab-menu-2 ul li.active {
  3730. /* background-color: #2a2e78; */
  3731. color: white;
  3732. cursor: default;
  3733. }
  3734. .solution-page-section .tab-menu-2 ul li div {
  3735. width: 100%;
  3736. height: 100%;
  3737. background-color: #2a2e78;
  3738. }
  3739. @media (max-width: 768px) {
  3740. .solution-page-section .tab-menu-1 {
  3741. display: none;
  3742. }
  3743. .solution-page-section .tab-menu-2 {
  3744. display: block;
  3745. }
  3746. }
  3747. .solution-page-section .main {
  3748. background-color: white;
  3749. margin: 0;
  3750. }
  3751. @media (max-width: 768px) {
  3752. .solution-page-section .main {
  3753. margin: 0 -15px;
  3754. }
  3755. }
  3756. .solution-page-section .main .title h1 {
  3757. text-align: center;
  3758. font-size: 24px;
  3759. font-weight: 600;
  3760. color: #010432;
  3761. }
  3762. .solution-page-section .main .sub-title h2 {
  3763. text-align: center;
  3764. font-size: 22px;
  3765. font-weight: 500;
  3766. color: #010432;
  3767. }
  3768. .solution-page-section .main .solution-grid-box {
  3769. border: #8386d5 1px solid;
  3770. border-radius: 5px;
  3771. position: relative;
  3772. }
  3773. .solution-page-section .main .solution-grid-box .solution-img {
  3774. overflow: hidden;
  3775. z-index: -2;
  3776. }
  3777. .solution-page-section .main .solution-grid-box .solution-img>div {
  3778. height: 290px;
  3779. width: 100%;
  3780. background-position: center center;
  3781. background-repeat: no-repeat;
  3782. background-size: cover;
  3783. }
  3784. .solution-page-section .main .solution-grid-box .cover-box {
  3785. position: absolute;
  3786. top: 0;
  3787. left: 0;
  3788. width: 100%;
  3789. height: 100%;
  3790. padding: 0 5px;
  3791. -webkit-transition: all 0.3s ease-out 0s;
  3792. transition: all 0.3s ease-out 0s;
  3793. z-index: 2;
  3794. opacity: 0;
  3795. visibility: hidden;
  3796. }
  3797. .solution-page-section .main .solution-grid-box .cover-box>div {
  3798. width: 100%;
  3799. }
  3800. .solution-page-section .main .solution-grid-box .cover-box p {
  3801. color: white;
  3802. font-size: 14px;
  3803. text-align: center;
  3804. }
  3805. .solution-page-section .main .solution-grid-box .cover-box div:nth-child(2) {
  3806. min-height: 80px;
  3807. }
  3808. .solution-page-section .main .solution-grid-box::after {
  3809. content: '';
  3810. position: absolute;
  3811. left: 0;
  3812. top: 0;
  3813. width: 100%;
  3814. height: 100%;
  3815. background-color: #041d38;
  3816. z-index: 1;
  3817. -webkit-transition: all 0.3s ease-out 0s;
  3818. transition: all 0.3s ease-out 0s;
  3819. opacity: 0;
  3820. visibility: hidden;
  3821. }
  3822. .solution-page-section .main .solution-grid-box:hover::after {
  3823. opacity: 0.9;
  3824. visibility: visible;
  3825. }
  3826. .solution-page-section .main .solution-grid-box:hover .cover-box {
  3827. opacity: 1;
  3828. visibility: visible;
  3829. }
  3830. .solution-page-section .main .solution-grid-title span {
  3831. color: #010432;
  3832. font-size: 16px;
  3833. font-weight: 600;
  3834. }
  3835. .solution-page-section .page a {
  3836. color: #2a2e78;
  3837. font-size: 22px;
  3838. text-decoration: underline;
  3839. cursor: pointer;
  3840. overflow: hidden;
  3841. text-overflow: ellipsis;
  3842. white-space: nowrap;
  3843. max-width: 415px;
  3844. }
  3845. .solution-page-section .page a:hover {
  3846. color: #639BFF;
  3847. }
  3848. /*===========================
  3849. Join us
  3850. ===========================*/
  3851. .join-section {
  3852. position: relative;
  3853. /* background-color: #f6f6fe; */
  3854. }
  3855. .join-section .container {
  3856. box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  3857. -webkit-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  3858. -moz-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  3859. }
  3860. .join-section .menu-1 {
  3861. color: white;
  3862. font-size: 24px;
  3863. padding: 0 0;
  3864. }
  3865. .join-section .menu-1 .title {
  3866. background-color: #2a2e78;
  3867. padding: 15px 0 15px 15px;
  3868. }
  3869. .join-section .menu-1 ul li {
  3870. color: #2a2e78;
  3871. margin-bottom: 2px;
  3872. background-color: #e0e0f8;
  3873. font-size: 16px;
  3874. cursor: pointer;
  3875. padding: 10px 0 10px 31px;
  3876. }
  3877. .join-section .menu-1 ul li.active {
  3878. padding: 10px 0 10px 15px;
  3879. cursor: default;
  3880. }
  3881. .join-section .menu-1 ul li.active::before {
  3882. content: "▪";
  3883. color: #2a2e78;
  3884. margin-right: 10px;
  3885. }
  3886. .join-section .menu-2 {
  3887. display: none;
  3888. }
  3889. .join-section .menu-2 ul li {
  3890. min-width: 50%;
  3891. text-align: center;
  3892. font-size: 18px;
  3893. cursor: pointer;
  3894. margin-bottom: 5px;
  3895. }
  3896. .join-section .menu-2 ul li span {
  3897. color: #2a2e78;
  3898. padding: 10px 0;
  3899. background-color: #e0e0f8;
  3900. width: 100%;
  3901. height: 100%;
  3902. }
  3903. .join-section .menu-2 ul li:nth-child(odd) {
  3904. padding-right: 5px;
  3905. }
  3906. .join-section .menu-2 ul li:nth-child(even) {
  3907. padding-left: 5px;
  3908. }
  3909. .join-section .menu-2 ul li.active span {
  3910. background-color: #2a2e78;
  3911. color: white;
  3912. cursor: default;
  3913. }
  3914. @media (max-width: 768px) {
  3915. .join-section .menu-1 {
  3916. display: none;
  3917. }
  3918. .join-section .menu-2 {
  3919. display: block;
  3920. }
  3921. }
  3922. .join-section .content {
  3923. background-color: white;
  3924. padding: 45px 30px;
  3925. /* border-bottom: 2px dotted #CCCCCC */
  3926. }
  3927. .join-section .container .row:not(:last-child) .content,
  3928. .join-section .container .content:not(:last-child) {
  3929. border-bottom: 2px dotted #CCCCCC
  3930. }
  3931. .join-section .content h1 {
  3932. font-size: 26px;
  3933. font-weight: normal;
  3934. color: #333;
  3935. margin-bottom: 40px;
  3936. }
  3937. .join-section .content h1 span {
  3938. font-size: 18px;
  3939. }
  3940. .join-section .content h2 {
  3941. font-size: 20px;
  3942. font-weight: normal;
  3943. padding: 10px 15px;
  3944. margin-bottom: 5px;
  3945. background: #EEEEEE;
  3946. width: calc(100% + 30px);
  3947. /* margin-left: -15px; */
  3948. margin: 25px 0 25px -15px;
  3949. }
  3950. .join-section .content p {
  3951. font-size: 16px;
  3952. margin-bottom: 8px;
  3953. }
  3954. @media(max-width:992px) {
  3955. .join-section .content {
  3956. padding: 45px 10px;
  3957. }
  3958. }
  3959. /*===========================
  3960. Example page
  3961. ===========================*/
  3962. .example-page-section {
  3963. position: relative;
  3964. background-color: #f6f6fe;
  3965. }
  3966. .example-page-section .menu-1 {
  3967. color: white;
  3968. font-size: 24px;
  3969. padding: 0 0;
  3970. }
  3971. .example-page-section .menu-1 .title {
  3972. background-color: #2a2e78;
  3973. padding: 15px 0 15px 15px;
  3974. }
  3975. .example-page-section .menu-1 ul li {
  3976. color: #2a2e78;
  3977. margin-bottom: 2px;
  3978. background-color: #e0e0f8;
  3979. font-size: 16px;
  3980. cursor: pointer;
  3981. padding: 10px 0 10px 31px;
  3982. }
  3983. .example-page-section .menu-1 ul li.active {
  3984. padding: 10px 0 10px 15px;
  3985. cursor: default;
  3986. }
  3987. .example-page-section .menu-1 ul li.active::before {
  3988. content: "▪";
  3989. color: #2a2e78;
  3990. margin-right: 10px;
  3991. }
  3992. .example-page-section .menu-2 {
  3993. display: none;
  3994. }
  3995. .example-page-section .menu-2 ul li {
  3996. min-width: 50%;
  3997. text-align: center;
  3998. font-size: 18px;
  3999. cursor: pointer;
  4000. margin-bottom: 5px;
  4001. }
  4002. .example-page-section .menu-2 ul li span {
  4003. color: #2a2e78;
  4004. padding: 10px 0;
  4005. background-color: #e0e0f8;
  4006. width: 100%;
  4007. height: 100%;
  4008. }
  4009. .example-page-section .menu-2 ul li:nth-child(odd) {
  4010. padding-right: 5px;
  4011. }
  4012. .example-page-section .menu-2 ul li:nth-child(even) {
  4013. padding-left: 5px;
  4014. }
  4015. .example-page-section .menu-2 ul li.active span {
  4016. background-color: #2a2e78;
  4017. color: white;
  4018. cursor: default;
  4019. }
  4020. @media (max-width: 768px) {
  4021. .example-page-section .menu-1 {
  4022. display: none;
  4023. }
  4024. .example-page-section .menu-2 {
  4025. display: block;
  4026. }
  4027. }
  4028. .example-page-section .subject-box {
  4029. background-color: white;
  4030. padding: 0 25px 5px;
  4031. }
  4032. .example-page-section .subject-box h1 {
  4033. text-align: center;
  4034. font-size: 24px;
  4035. font-weight: 600;
  4036. color: #010432;
  4037. }
  4038. .example-page-section .subject-box .subject-img {
  4039. float: right;
  4040. max-height: 368px;
  4041. max-width: 550px;
  4042. }
  4043. .example-page-section .subject-box p {
  4044. font-size: 16px;
  4045. color: #010432;
  4046. margin-bottom: 8px;
  4047. text-align: left;
  4048. text-indent: 30px;
  4049. }
  4050. @media (max-width: 990px) {
  4051. .example-page-section .subject-box .subject-img {
  4052. float: none;
  4053. height: 100%;
  4054. width: 100%;
  4055. }
  4056. }
  4057. .example-page-section .example-list-box {
  4058. background-color: white;
  4059. padding: 35px 25px 5px;
  4060. }
  4061. .example-page-section .example-list-box .title h1 {
  4062. background-color: #2a2e78;
  4063. color: white;
  4064. font-size: 38px;
  4065. line-height: 65px;
  4066. font-weight: 300;
  4067. width: 300px;
  4068. text-align: center;
  4069. }
  4070. .example-page-section .example-list-box .img-box {
  4071. /* overflow: hidden; */
  4072. float: right;
  4073. position: relative;
  4074. z-index: 5;
  4075. }
  4076. .example-page-section .example-list-box .img-box .img-div {
  4077. width: 252px;
  4078. height: 322px;
  4079. background-position: center center;
  4080. background-size: cover;
  4081. background-repeat: no-repeat;
  4082. z-index: 2;
  4083. }
  4084. .example-page-section .example-list-box .img-box::after {
  4085. position: absolute;
  4086. right: -14px;
  4087. bottom: -14px;
  4088. width: 180px;
  4089. height: 180px;
  4090. background-color: #2a2e78;
  4091. content: '';
  4092. -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
  4093. clip-path: polygon(100% 0, 0 100%, 100% 100%);
  4094. z-index: -1;
  4095. }
  4096. @media (max-width: 990px) {
  4097. .example-page-section .example-list-box .img-box {
  4098. float: none;
  4099. width: 100%;
  4100. margin-bottom: 15px;
  4101. }
  4102. .example-page-section .example-list-box .img-box .img-div {
  4103. width: 100%;
  4104. }
  4105. }
  4106. .example-page-section .example-list-box .memo-box img {
  4107. max-width: 202px;
  4108. height: 14px;
  4109. }
  4110. .example-page-section .example-list-box .memo-box h1 {
  4111. color: #2a2e78;
  4112. font-size: 22px;
  4113. font-weight: 600;
  4114. padding: 5px 0;
  4115. }
  4116. .example-page-section .example-list-box .memo-box .location-scale {
  4117. color: #2a2e78;
  4118. font-size: 16px;
  4119. font-weight: 600;
  4120. }
  4121. .example-page-section .example-list-box .memo-box .location-scale span:nth-child(1) {
  4122. min-width: 200px;
  4123. }
  4124. .example-page-section .example-list-box .memo-box p {
  4125. color: #010432;
  4126. text-indent: 30px;
  4127. line-height: 1.7;
  4128. }
  4129. .example-page-section .example-list-box .line {
  4130. height: 2px;
  4131. background-color: #f6f6fe;
  4132. }
  4133. /*===========================
  4134. About Page
  4135. ===========================*/
  4136. .about-introduce-section {
  4137. position: relative;
  4138. }
  4139. .about-introduce-section h4 {
  4140. font-size: 20px;
  4141. margin-bottom: 20px;
  4142. }
  4143. .about-introduce-section .img-box {
  4144. text-align: center
  4145. }
  4146. .about-introduce-section .img-box img {
  4147. /* max-width: 411px; */
  4148. /* max-height: 332px; */
  4149. /* margin: 0 auto; */
  4150. /* display: block; */
  4151. width: 90%;
  4152. height: 100%;
  4153. text-align: right
  4154. }
  4155. .about-introduce-section .content p {
  4156. font-size: 16px;
  4157. color: #666;
  4158. line-height: 1.8;
  4159. }
  4160. .about-intro-top p {
  4161. font-size: 18px
  4162. }
  4163. /* .about-introduce-section .content p:nth-child(1) {
  4164. text-indent: 20px;
  4165. }
  4166. .about-introduce-section .content p:nth-child(2) {
  4167. text-indent: 30px;
  4168. } */
  4169. .about-introduce-section .content p span {
  4170. font-weight: 600;
  4171. padding-right: 5px;
  4172. }
  4173. .about-introduce-section .content a {
  4174. border: #2a2e78 1px solid;
  4175. color: #2a2e78;
  4176. font-size: 20px;
  4177. padding: 3px 30px;
  4178. }
  4179. .about-introduce-section .content a:hover {
  4180. border: #639BFF 1px solid;
  4181. color: #639BFF;
  4182. }
  4183. /*===========================
  4184. About Page -- Credential
  4185. ===========================*/
  4186. .credential-section {
  4187. position: relative;
  4188. background-color: #ffff;
  4189. }
  4190. .course-section {
  4191. position: relative;
  4192. background-color: #ffff;
  4193. }
  4194. /*===========================
  4195. About Page -- Investor Relations
  4196. ===========================*/
  4197. .investor-section {
  4198. position: relative;
  4199. }
  4200. /*===========================
  4201. About Page -- Organizational Structure
  4202. ===========================*/
  4203. .org-structure-section {
  4204. position: relative;
  4205. background-color: #f7fcff;
  4206. }
  4207. /*===========================
  4208. About Page -- History
  4209. ===========================*/
  4210. .history-section {
  4211. position: relative;
  4212. }
  4213. .history-section .content .left-box {
  4214. width: 185px;
  4215. min-width: 185px;
  4216. border-right: #2a2e78 5px solid;
  4217. display: inline-block;
  4218. }
  4219. .history-section .content h1 {
  4220. color: #2a2e78;
  4221. font-size: 20px;
  4222. font-weight: 600;
  4223. }
  4224. .history-section .content .line {
  4225. height: 5px;
  4226. width: 25px;
  4227. background-color: #2a2e78;
  4228. }
  4229. .history-section .content .right-box {
  4230. display: inline-block;
  4231. }
  4232. .history-section .content .right-box p {
  4233. padding-left: 25px;
  4234. }
  4235. .history-section .content .right-box p span,
  4236. .history-section .content .left-box p span {
  4237. color: #2a2e78;
  4238. padding-right: 5px;
  4239. }
  4240. /*===========================
  4241. About Page -- Sub Company
  4242. ===========================*/
  4243. .about-sub-company-section {
  4244. position: relative;
  4245. /* background-image: url(../img/about/contact.png); */
  4246. /* background-position: top center; */
  4247. /* background-repeat: no-repeat; */
  4248. }
  4249. .about-sub-company-section h4 {
  4250. font-size: 22px;
  4251. color: #2D2D2D;
  4252. }
  4253. @media (max-width: 770px) {
  4254. .about-sub-company-section {
  4255. /* background-image: none; */
  4256. /* height: 100%; */
  4257. }
  4258. }
  4259. .about-sub-company-section p {
  4260. font-size: 18px;
  4261. color: #6B6B6B
  4262. }
  4263. .about-sub-company-section .item-box {
  4264. max-width: 500px;
  4265. }
  4266. .about-sub-company-section .item-box .address-iphone-box .icon {
  4267. width: 25px;
  4268. height: 25px;
  4269. min-width: 25px;
  4270. min-height: 25px;
  4271. fill: currentColor;
  4272. overflow: hidden;
  4273. }
  4274. .about-sub-company-section hr {
  4275. margin: 35px 0;
  4276. }
  4277. .about-sub-company-section .item-box .short-name-box {
  4278. min-width: 100px;
  4279. }
  4280. /*===========================
  4281. Service page
  4282. ===========================*/
  4283. .service-section {
  4284. position: relative;
  4285. background-color: #f6f6fe;
  4286. }
  4287. .service-section h1 {
  4288. text-align: center;
  4289. font-size: 22px;
  4290. font-weight: 500;
  4291. color: #010432;
  4292. }
  4293. .service-section .content-box {
  4294. max-width: 440px;
  4295. margin: 0 auto;
  4296. }
  4297. .service-section .left-box {
  4298. min-width: 200px;
  4299. padding: 0 20px;
  4300. display: inline-block;
  4301. }
  4302. .service-section .left-box img {
  4303. max-width: 160px;
  4304. max-height: 160px;
  4305. width: 100%;
  4306. height: 100%;
  4307. display: block;
  4308. margin: 0 auto;
  4309. }
  4310. .service-section .left-box span {
  4311. text-align: center;
  4312. display: block;
  4313. font-size: 16px;
  4314. font-weight: 500;
  4315. color: #010432;
  4316. }
  4317. .service-section .right-box {
  4318. padding: 0 20px;
  4319. height: 160px;
  4320. display: inline-block;
  4321. }
  4322. .service-section .right-box>div {
  4323. height: 100%;
  4324. }
  4325. .service-section .right-box img {
  4326. max-width: 26px;
  4327. max-height: 20px;
  4328. }
  4329. .service-section .right-box p span {
  4330. font-size: 16px;
  4331. color: #010432;
  4332. }
  4333. .service-section .right-box .download {
  4334. padding: 10px 0;
  4335. background-color: #2a2e78;
  4336. cursor: pointer;
  4337. }
  4338. .service-section .right-box .download span {
  4339. color: white;
  4340. }
  4341. .service-section .right-box .download:hover span {
  4342. color: #639BFF;
  4343. }
  4344. .service-section .right-box .download:hover svg path {
  4345. fill: #639BFF;
  4346. }
  4347. @media (max-width:576px) {
  4348. .service-section .right-box,
  4349. .service-section .left-box {
  4350. width: 100%;
  4351. display: block;
  4352. }
  4353. .service-section .right-box {
  4354. margin-top: 20px;
  4355. }
  4356. .service-section .right-box>div {
  4357. -ms-flex-align: center;
  4358. align-items: center;
  4359. }
  4360. .service-section .right-box .download {
  4361. min-width: 200px;
  4362. }
  4363. }
  4364. /*===========================
  4365. Technology page
  4366. ===========================*/
  4367. .technology-section {
  4368. position: relative;
  4369. background-color: #f6f6fe;
  4370. }
  4371. .technology-section .menu-1 {
  4372. color: white;
  4373. font-size: 24px;
  4374. padding: 0 0;
  4375. }
  4376. .technology-section .menu-1 .title {
  4377. background-color: #2a2e78;
  4378. padding: 15px 0 15px 15px;
  4379. }
  4380. .technology-section .menu-1 ul li {
  4381. color: #010432;
  4382. margin-bottom: 2px;
  4383. background-color: #e0e0f8;
  4384. font-size: 16px;
  4385. font-weight: 600;
  4386. cursor: pointer;
  4387. padding: 10px 0 10px 31px;
  4388. }
  4389. .technology-section .menu-1 ul li.active {
  4390. padding: 10px 0 10px 15px;
  4391. cursor: default;
  4392. color: #2a2e78;
  4393. font-weight: 500;
  4394. }
  4395. .technology-section .menu-1 ul li.active::before {
  4396. content: "▪";
  4397. color: #2a2e78;
  4398. margin-right: 10px;
  4399. display: inline-block;
  4400. }
  4401. .technology-section .menu-2 {
  4402. display: none;
  4403. }
  4404. .technology-section .menu-2 ul li {
  4405. min-width: 50%;
  4406. text-align: center;
  4407. font-size: 18px;
  4408. cursor: pointer;
  4409. margin-bottom: 5px;
  4410. }
  4411. .technology-section .menu-2 ul li span {
  4412. color: #2a2e78;
  4413. padding: 10px 0;
  4414. background-color: #e0e0f8;
  4415. width: 100%;
  4416. height: 100%;
  4417. }
  4418. .technology-section .menu-2 ul li.active span {
  4419. background-color: #2a2e78;
  4420. color: white;
  4421. cursor: default;
  4422. }
  4423. @media (max-width: 768px) {
  4424. .technology-section .menu-1 {
  4425. display: none;
  4426. }
  4427. .technology-section .menu-2 {
  4428. display: block;
  4429. }
  4430. }
  4431. .technology-section .content-box {
  4432. background-color: white;
  4433. padding: 40px 30px;
  4434. }
  4435. @media (max-width: 575px) {
  4436. .technology-section .content-box {
  4437. padding: 40px 15px;
  4438. }
  4439. }
  4440. .technology-section .content-box h1 {
  4441. font-size: 24px;
  4442. font-weight: 600;
  4443. text-align: center;
  4444. color: #010432;
  4445. }
  4446. .technology-section .content-box .item {
  4447. border: #dcdcdc 2px solid;
  4448. }
  4449. .technology-section .content-box .item .title {
  4450. height: 45px;
  4451. color: #010432;
  4452. background-color: #F0EFF5;
  4453. font-size: 20px;
  4454. font-weight: 600;
  4455. }
  4456. .technology-section .content-box .item .memo-box {
  4457. padding: 25px
  4458. }
  4459. .technology-section .content-box .item .memo-box .img-box {
  4460. float: left;
  4461. margin-right: 10px;
  4462. overflow: hidden;
  4463. }
  4464. .technology-section .content-box .item .memo-box .img-box .img-div {
  4465. width: 162px;
  4466. height: 199px;
  4467. background-position: center center;
  4468. background-repeat: no-repeat;
  4469. background-size: cover;
  4470. }
  4471. .technology-section .content-box .item .memo-box p {
  4472. font-size: 16px;
  4473. font-weight: 400;
  4474. text-indent: 30px;
  4475. color: #010432;
  4476. }
  4477. @media (max-width: 576px) {
  4478. .technology-section .content-box .item .memo-box .img-box {
  4479. float: none;
  4480. width: 100%;
  4481. margin-right: 0;
  4482. }
  4483. .technology-section .content-box .item .memo-box .img-box .img-div {
  4484. width: 100%;
  4485. }
  4486. }
  4487. /* common */
  4488. @font-face {
  4489. font-family: "iconfont";
  4490. src: url('../fonts/iconfont/iconfont.eot');
  4491. /* IE9*/
  4492. src: url('../fonts/iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  4493. url('../fonts/iconfont/iconfont.woff') format('woff'), /* chrome, firefox */
  4494. url('../fonts/iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  4495. url('../fonts/iconfont/iconfont.svg#iconfont') format('svg');
  4496. /* iOS 4.1- */
  4497. }
  4498. .iconfont {
  4499. font-family: "iconfont" !important;
  4500. font-size: 16px;
  4501. font-style: normal;
  4502. -webkit-font-smoothing: antialiased;
  4503. -webkit-text-stroke-width: 0.2px;
  4504. -moz-osx-font-smoothing: grayscale;
  4505. }
  4506. .mobile {
  4507. display: none
  4508. }
  4509. .color-white {
  4510. color: #fff
  4511. }
  4512. .bg-white {
  4513. background: #fff
  4514. }
  4515. .bg-blue {
  4516. background: #90BBFF
  4517. }
  4518. .bg-gray {
  4519. background: #F4F8FD
  4520. }
  4521. .arrow-right {
  4522. width: 16px;
  4523. }
  4524. h2.subtitle {
  4525. font-size: 32px;
  4526. font-weight: normal;
  4527. color: #333;
  4528. line-height: 1.5;
  4529. }
  4530. .title-tag2 {
  4531. font-size: 24px;
  4532. font-weight: bold;
  4533. }
  4534. .learn-more {
  4535. margin-top: 100px;
  4536. text-align: right;
  4537. cursor: pointer;
  4538. }
  4539. .line-one {
  4540. overflow: hidden;
  4541. white-space: nowrap;
  4542. text-overflow: ellipsis;
  4543. }
  4544. .line-two {
  4545. text-overflow: -o-ellipsis-lastline;
  4546. overflow: hidden;
  4547. text-overflow: ellipsis;
  4548. display: -webkit-box;
  4549. -webkit-line-clamp: 2;
  4550. line-clamp: 2;
  4551. -webkit-box-orient: vertical;
  4552. display: -webkit-box;
  4553. -webkit-box-orient: vertical;
  4554. -webkit-line-clamp: 2;
  4555. overflow: hidden;
  4556. }
  4557. /* 面包屑 */
  4558. .crumbs li {
  4559. display: inline-block;
  4560. line-height: 48px;
  4561. color: #ccc;
  4562. font-size: 14px;
  4563. }
  4564. .crumbs li.active {
  4565. color: #000;
  4566. }
  4567. /* .crumbs li.active,
  4568. .crumbs li:hover {
  4569. color: #000;
  4570. cursor: pointer
  4571. } */
  4572. p.subtit {
  4573. font-size: 20px
  4574. }
  4575. /* why */
  4576. .whyUs-section .whyUs-text p {
  4577. /* text-indent: 25px; */
  4578. }
  4579. @media (min-width: 991px) {
  4580. .pos-top {
  4581. margin-top: 50px
  4582. }
  4583. .whyUs-text {
  4584. padding-left: 80px
  4585. }
  4586. }
  4587. .whyUs-item p {
  4588. font-size: 20px;
  4589. color: #153A78
  4590. }
  4591. .whyUs-item {
  4592. padding: 24px 0 34px;
  4593. opacity: 1;
  4594. background: #ffffff;
  4595. border-radius: 10px;
  4596. margin-bottom: 30px;
  4597. /* -webkit-box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%);
  4598. box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); */
  4599. box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  4600. -webkit-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  4601. -moz-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
  4602. }
  4603. .whyUs-item.active {
  4604. color: #fff;
  4605. background: #639BFF
  4606. }
  4607. .whyUs-item.active i,
  4608. .whyUs-item.active p {
  4609. color: #fff;
  4610. }
  4611. .whyUs-item:hover {
  4612. color: #fff;
  4613. background: #639BFF;
  4614. cursor: pointer;
  4615. }
  4616. .whyUs-item:hover i,
  4617. .whyUs-item:hover p {
  4618. color: #fff;
  4619. }
  4620. .whyUs-item i {
  4621. font-size: 60px;
  4622. color: #639BFF;
  4623. margin-bottom: 20px
  4624. }
  4625. /* about */
  4626. .about-section {
  4627. background: #F4F8FD
  4628. }
  4629. .about-section .learn-more {
  4630. margin-bottom: 50px;
  4631. }
  4632. .about-text-box p {
  4633. line-height: 1.9
  4634. }
  4635. @media (min-width: 991px) {
  4636. .about-text-box {
  4637. padding-right: 80px
  4638. }
  4639. }
  4640. /* news */
  4641. .news-section .col-md-6 {
  4642. padding-bottom: 80px;
  4643. padding-top: 80px;
  4644. }
  4645. .news-section .col-md-6:before {
  4646. content: '';
  4647. width: calc(100% - 50px);
  4648. height: 2px;
  4649. display: inline-block;
  4650. background-color: #F5F5F5;
  4651. /* margin-right: 5px; */
  4652. position: absolute;
  4653. bottom: 0;
  4654. left: 0;
  4655. margin-left: 14px;
  4656. }
  4657. .news-section .col-md-6:nth-child(3):before,
  4658. .news-section .col-md-6:nth-child(4):before {
  4659. height: 0
  4660. }
  4661. .news-tit {
  4662. font-size: 18px;
  4663. color: #2A2A2A;
  4664. line-height: 40px;
  4665. margin-bottom: 10px;
  4666. font-weight: normal
  4667. }
  4668. .news-des,
  4669. .news-time {
  4670. font-size: 14px;
  4671. color: #666
  4672. }
  4673. .news-tit:before {
  4674. content: "▪";
  4675. /* color: rgb(42, 46, 120); */
  4676. margin-right: 10px;
  4677. }
  4678. .news-section .right-sec {
  4679. position: relative
  4680. }
  4681. .news-time {
  4682. position: absolute;
  4683. top: 12px;
  4684. display: block;
  4685. right: 50px
  4686. }
  4687. .read-more {
  4688. position: absolute;
  4689. bottom: 0px;
  4690. width: 16px;
  4691. right: 50px
  4692. }
  4693. /* solution */
  4694. .solution-section p {
  4695. font-size: 18px;
  4696. margin-bottom: 40px
  4697. }
  4698. .solution-img {
  4699. text-align: center
  4700. }
  4701. .solution-list-tit {
  4702. font-size: 20px;
  4703. margin-bottom: 20px
  4704. }
  4705. .solution-list .learn-more {
  4706. margin-top: 0
  4707. }
  4708. /* solution-detail */
  4709. .solution-detail .section-content>p {
  4710. text-indent: 36px;
  4711. font-size: 18px;
  4712. }
  4713. .solution-detail .section-content img {
  4714. margin-top: 30px
  4715. }
  4716. .swiper-slide {
  4717. width: 100%!important
  4718. }
  4719. @media (max-width: 992px) {
  4720. .title-tag2 {
  4721. font-size: 20px;
  4722. }
  4723. .solution-section p,
  4724. .solution-detail .section-content>p {
  4725. font-size: 16px;
  4726. }
  4727. .img-left .solution-list-tit {
  4728. margin-top: 60px
  4729. }
  4730. .img-right .main-btn {
  4731. margin-bottom: 20px
  4732. }
  4733. .solution-section {
  4734. padding-top: 40px;
  4735. padding-bottom: 40px
  4736. }
  4737. }
  4738. @media (min-width: 992px) {
  4739. .solution-section p {
  4740. width: 96%
  4741. }
  4742. .solution-section.img-left p,
  4743. .solution-section.img-left .solution-list-tit {
  4744. margin-left: 4%
  4745. }
  4746. }
  4747. /* solution-detail2 */
  4748. .list-content {
  4749. position: relative;
  4750. margin-top: 30px;
  4751. text-align: center
  4752. }
  4753. .list-content .modal-bg {
  4754. content: '';
  4755. position: absolute;
  4756. left: 0;
  4757. top: 0;
  4758. width: 100%;
  4759. height: 100%;
  4760. background-color: #041d38;
  4761. z-index: 1;
  4762. -webkit-transition: all 0.3s ease-out 0s;
  4763. transition: all 0.3s ease-out 0s;
  4764. display: flex;
  4765. justify-content: center;
  4766. align-items: center;
  4767. opacity: 0;
  4768. visibility: hidden;
  4769. }
  4770. .list-content:hover .modal-bg {
  4771. opacity: 1;
  4772. background-color: rgba(0, 0, 0, .3);
  4773. visibility: visible;
  4774. }
  4775. span.click-more {
  4776. text-align: center;
  4777. align-items: center;
  4778. justify-content: center;
  4779. font-size: 18px;
  4780. background: #639BFF;
  4781. padding: 8px 13px;
  4782. border-radius: 20px;
  4783. color: #fff;
  4784. display: inline-block;
  4785. cursor: pointer;
  4786. }
  4787. .solution-detail .list-content img {
  4788. margin-top: 0;
  4789. width: 100%
  4790. }
  4791. .list-content:hover .click-more {
  4792. opacity: 0.9;
  4793. visibility: visible;
  4794. }
  4795. .pro-tit {
  4796. text-align: center;
  4797. margin-top: 15px;
  4798. font-size: 18px;
  4799. }
  4800. .detail-modal {
  4801. position: fixed;
  4802. background: rgba(0, 0, 0, .8);
  4803. top: 0;
  4804. bottom: 0;
  4805. left: 0;
  4806. margin: auto;
  4807. width: 100%;
  4808. height: 100%;
  4809. right: 0;
  4810. color: #fff;
  4811. z-index: 999;
  4812. background: rgba(255, 255, 255, .3);
  4813. display: flex;
  4814. justify-content: center;
  4815. align-items: center;
  4816. }
  4817. .modal-box {
  4818. background: rgba(0, 0, 0, .8);
  4819. width: 600px;
  4820. padding: 50px;
  4821. text-align: center;
  4822. position: relative;
  4823. border-radius: 10px;
  4824. overflow: hidden;
  4825. /* font-size: 20px; */
  4826. }
  4827. .modal-text {
  4828. text-align: left;
  4829. }
  4830. .modal-tit {
  4831. font-size: 24px;
  4832. color: #fff;
  4833. margin: 20px;
  4834. }
  4835. .close-img {
  4836. position: absolute;
  4837. top: -2px;
  4838. right: -2px;
  4839. cursor: pointer;
  4840. border-radius: 10px;
  4841. ;
  4842. }
  4843. .modal-text p {
  4844. text-indent: 30px;
  4845. }
  4846. .modal-link {
  4847. text-align: left
  4848. }
  4849. .modal-link p {
  4850. line-height: 1;
  4851. margin-top: 10px
  4852. }
  4853. .modal-link a {
  4854. color: #00EAFF
  4855. }
  4856. .page-des {
  4857. position: absolute;
  4858. left: 2%;
  4859. font-size: 12px;
  4860. color: #646464;
  4861. line-height: 36px;
  4862. bottom: 0
  4863. }
  4864. @media(min-width:1280px) and (max-width:1366px) {
  4865. .modal-box {
  4866. transform: scale(.95);
  4867. }
  4868. }
  4869. @media(min-width:992px) and (max-width:1280px) {
  4870. .modal-box {
  4871. transform: scale(.8);
  4872. }
  4873. }
  4874. @media(max-width:992px) {
  4875. .modal-box {
  4876. transform: scale(.6);
  4877. padding: 15px;
  4878. width: 100%
  4879. }
  4880. }
  4881. /* 发展历程 */
  4882. .history-section {
  4883. text-align: center;
  4884. background: #F4F8FD;
  4885. padding: 70px;
  4886. }
  4887. .history-des {
  4888. width: 60%;
  4889. margin: 0 auto;
  4890. font-size: 18px
  4891. }
  4892. .history-white {
  4893. background: #fff;
  4894. padding: 35px 0
  4895. }
  4896. /* .history-section .container {
  4897. background: #fff
  4898. } */
  4899. /* 荣誉资质 */
  4900. .credential-tit1 {
  4901. font-size: 24px;
  4902. margin-bottom: 10px;
  4903. }
  4904. .credential-tit2 {
  4905. font-size: 36px;
  4906. font-weight: 500
  4907. }
  4908. .company-sec,
  4909. .partner-sec {
  4910. padding: 60px 0
  4911. }
  4912. .partner-sec img {
  4913. /* padding-top: 60px; */
  4914. }
  4915. .company-sec {
  4916. padding-left: 50px;
  4917. }
  4918. .company-sec p,
  4919. .partner-sec p {
  4920. line-height: 40px;
  4921. }
  4922. .phone-sec {
  4923. padding: 60px 40px
  4924. }
  4925. .phone-sec p {
  4926. color: #fff
  4927. }
  4928. .phone-list p:last-child {
  4929. font-size: 30px;
  4930. line-height: 30px;
  4931. padding-bottom: 15px;
  4932. font-family: "Helvetica Neue", Arial
  4933. }
  4934. .phone-list {
  4935. position: relative;
  4936. }
  4937. .phone-list span {
  4938. font-size: 18px
  4939. }
  4940. .phone-list:before {
  4941. content: '';
  4942. width: 18px;
  4943. height: 1px;
  4944. display: inline-block;
  4945. background-color: #fff;
  4946. /* margin-right: 5px; */
  4947. position: absolute;
  4948. bottom: 0px;
  4949. left: 0;
  4950. }
  4951. .about-shadow {
  4952. -webkit-box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%);
  4953. box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%)
  4954. }
  4955. /* 走马灯 */
  4956. #marquee_box {
  4957. overflow: hidden;
  4958. width: 100%;
  4959. }
  4960. #marquee_box img {
  4961. border: 3px solid #F2F2F2;
  4962. width: 250px;
  4963. margin: 0 5px
  4964. }
  4965. #marquee_img {
  4966. float: left;
  4967. width: 1000%;
  4968. }
  4969. #marquee_img1 {
  4970. float: left;
  4971. }
  4972. #marquee_img2 {
  4973. float: left;
  4974. }
  4975. /* .solution-list-section .solution-img {
  4976. float: left
  4977. }
  4978. .solution-list-section .solution-dest {
  4979. float: right
  4980. } */
  4981. .solution-list-section:nth-child(even) .solution-img {
  4982. float: right
  4983. }
  4984. .solution-list-section:nth-child(even) .solution-dest {
  4985. float: left
  4986. }
  4987. .solution-list-section:nth-child(odd) .solution-img {
  4988. float: left
  4989. }
  4990. .solution-list-section:nth-child(odd) .solution-dest {
  4991. float: right
  4992. }
  4993. .solution-list {
  4994. overflow: hidden
  4995. }
  4996. .new-read-body p {
  4997. text-indent: 32px
  4998. }
  4999. @media(min-width:992px) {
  5000. .about-introduce-section .img-box {
  5001. text-align: right
  5002. }
  5003. }
  5004. @media(max-width:992px) {
  5005. .history-section {
  5006. padding: 50px;
  5007. }
  5008. .history-des {
  5009. width: 100%
  5010. }
  5011. .company-sec,
  5012. .partner-sec {
  5013. padding: 40px 20px;
  5014. }
  5015. .phone-list p:last-child {
  5016. font-size: 24px
  5017. }
  5018. }
  5019. @media (max-width: 768px) {
  5020. .news-section .col-md-6:nth-child(3):before {
  5021. height: 2px
  5022. }
  5023. #marquee_box img {
  5024. width: 200px;
  5025. }
  5026. }
  5027. @media (max-width: 414px) {
  5028. .banner-section {
  5029. padding-top: 0px;
  5030. }
  5031. .section-title span.title-tag {
  5032. font-size: 30px
  5033. }
  5034. h2.subtitle {
  5035. font-size: 24px
  5036. }
  5037. .whyUs-item i {
  5038. font-size: 50px
  5039. }
  5040. .main-btn {
  5041. padding: 6px 20px
  5042. }
  5043. .pro-tit {
  5044. font-size: 16px;
  5045. }
  5046. .solution-detail p.subtit {
  5047. font-size: 18px;
  5048. }
  5049. .page-des {
  5050. display: none;
  5051. }
  5052. .news-content-section .content li {
  5053. padding: 25px 0
  5054. }
  5055. .about-intro-top p {
  5056. font-size: 16px
  5057. }
  5058. .about-introduce-section .img-box img {
  5059. margin-top: 20px
  5060. }
  5061. .credential-tit1 {
  5062. font-size: 18px
  5063. }
  5064. .credential-tit2 {
  5065. font-size: 26px
  5066. }
  5067. .about-sub-company-section p {
  5068. font-size: 16px
  5069. }
  5070. }
  5071. /* 响应式 */
  5072. /* 首页及底部 */
  5073. @media(max-width:414px) {
  5074. /* common */
  5075. body {
  5076. font-size: 14px
  5077. }
  5078. .mobile {
  5079. display: block
  5080. }
  5081. .pc {
  5082. display: none
  5083. }
  5084. /* footer */
  5085. footer .footer-widget-area .widget .widget-title {
  5086. font-size: 18px
  5087. }
  5088. footer .copy-right-area .copyrigt-text {
  5089. font-size: 14px
  5090. }
  5091. .copyrigt-or-code span {
  5092. font-size: 14px;
  5093. }
  5094. /* 导航 */
  5095. header .mainmenu-area {
  5096. padding: 15px
  5097. }
  5098. header .mainmenu-area .main-menu .logo img {
  5099. width: 80px;
  5100. }
  5101. header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
  5102. margin-top: -53px;
  5103. padding: 5px 6px;
  5104. width: 22px;
  5105. }
  5106. /* 首页 */
  5107. .shutter {
  5108. height: 200px;
  5109. margin-top: 69px
  5110. }
  5111. .shutter-btn li {
  5112. margin-top: 10px
  5113. }
  5114. .shutter-btn li.prev {
  5115. left: 10px
  5116. }
  5117. .shutter-btn li.next {
  5118. right: 10px
  5119. }
  5120. .whyUs-text {
  5121. margin-top: 30px
  5122. }
  5123. .about-section .section-title {
  5124. padding-bottom: 90px!important
  5125. }
  5126. .news-section .right-sec {
  5127. padding: -10px
  5128. }
  5129. .news-section .col-md-6 {
  5130. padding-top: 40px;
  5131. padding-bottom: 40px
  5132. }
  5133. .read-more,
  5134. .news-time {
  5135. right: 15px
  5136. }
  5137. .news-section .col-md-6:before {
  5138. width: calc(100% - 30px);
  5139. }
  5140. span.click-more {
  5141. padding: 6px 10px;
  5142. font-size: 12px;
  5143. }
  5144. .solution-list-section .container {
  5145. padding: 0
  5146. }
  5147. .news-content-section .content li:before {
  5148. width: 100%;
  5149. }
  5150. .about-sub-company-section {
  5151. padding-bottom: 0
  5152. }
  5153. .phone-list span {
  5154. font-size: 14px
  5155. }
  5156. /* 加入我们 */
  5157. .join-banner.common-bradcrumb-section {
  5158. background-position: 63% center;
  5159. }
  5160. .join-section .content p {
  5161. font-size: 14px
  5162. }
  5163. }
  5164. @media(max-width:320px) {
  5165. .section-title span.title-tag {
  5166. font-size: 23px
  5167. }
  5168. .whyUs-item p {
  5169. font-size: 18px
  5170. }
  5171. h2.subtitle {
  5172. font-size: 20px;
  5173. }
  5174. .solution-section p,
  5175. .solution-detail .section-content>p {
  5176. font-size: 14px;
  5177. text-indent: 28px;
  5178. }
  5179. .pro-tit {
  5180. font-size: 12px
  5181. }
  5182. .about-intro-top p {
  5183. font-size: 14px
  5184. }
  5185. .about-introduce-section .content p {
  5186. font-size: 14px
  5187. }
  5188. .history-des {
  5189. font-size: 14px
  5190. }
  5191. .join-section .content h1 {
  5192. font-size: 20px
  5193. }
  5194. .join-section .content h2 {
  5195. font-size: 18px
  5196. }
  5197. footer .footer-widget-area .widget .widget-title {
  5198. font-size: 16px;
  5199. }
  5200. }
  5201. /* newBox start */
  5202. .newItemOne {
  5203. margin-bottom: 48px;
  5204. /* box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 15%); */
  5205. }
  5206. .oneInnerBox {
  5207. box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 15%);
  5208. padding: 15px;
  5209. }
  5210. .oneInnerBox:hover {
  5211. /* background: rgb(241, 239, 239) */
  5212. box-shadow: 0px 2px 17px 4px rgba(126, 126, 126, 0.3);
  5213. }
  5214. .oneInnerBox a {
  5215. font-size: 16px;
  5216. font-weight: bold;
  5217. margin-top: 26px;
  5218. color: #333
  5219. }
  5220. .newItemOne .oneInnerBox .img {
  5221. height: 200px
  5222. }
  5223. .oneInnerBox span {
  5224. color: #666;
  5225. margin-top: 30px;
  5226. font-size: 14px;
  5227. }
  5228. .page-des2 {
  5229. position: absolute;
  5230. right: 2%;
  5231. font-size: 12px;
  5232. color: #646464;
  5233. bottom: 0;
  5234. }
  5235. .page-des2 input {
  5236. margin-right: 5px;
  5237. font-size: 12px;
  5238. color: #646464;
  5239. font-weight: bold;
  5240. border: #646464 1px solid;
  5241. padding: 6px 5px;
  5242. width: 25px;
  5243. line-height: auto;
  5244. height: auto;
  5245. cursor: pointer;
  5246. box-sizing: content-box;
  5247. border-radius: 2px;
  5248. }
  5249. @media(min-width:768px) {
  5250. .oneInnerBox {
  5251. width: 94%;
  5252. margin-right: 3%;
  5253. margin-left: 3%;
  5254. }
  5255. }
  5256. /* newBox end */
  5257. ;