styles-contact.css 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  1. .navbar .navbar-collapse {
  2. -webkit-box-flex: 0;
  3. -ms-flex-positive: 0;
  4. flex-grow: 0;
  5. }
  6. .header {
  7. margin-top: 77px;
  8. padding-top: 6.5rem;
  9. height: 75vh;
  10. position: relative;
  11. padding-bottom: 3rem;
  12. }
  13. * {
  14. margin: 0;
  15. padding: 0;
  16. -webkit-box-sizing: border-box;
  17. box-sizing: border-box;
  18. }
  19. .Contact_Us {
  20. position: relative;
  21. }
  22. .Contact_Us .banner {
  23. width: 100%;
  24. height: 300px;
  25. position: relative;
  26. z-index: -1;
  27. margin-top: -19vw;
  28. }
  29. .Contact_Us .banner h2 {
  30. position: absolute;
  31. color: #fff;
  32. top: 7vw;
  33. left: 50%;
  34. -webkit-transform: translate(-50%, -50%);
  35. transform: translate(-50%, -50%);
  36. text-transform: uppercase;
  37. letter-spacing: 2px;
  38. text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  39. font-size: 3vw;
  40. }
  41. .Contact_Us .slick-next::before {
  42. content: "";
  43. }
  44. .Contact_Us .slick-prev::before {
  45. content: "";
  46. }
  47. .Contact_Us .slick-dots li {
  48. border-radius: 50%;
  49. }
  50. .Contact_Us .slick-dots li button::before {
  51. font-size: 10px;
  52. }
  53. .Contact_Us .slick-dots li.slick-active button:before {
  54. color: #EA5413;
  55. opacity: 1;
  56. border-radius: 50%;
  57. border: 1px solid #EA5413;
  58. }
  59. .Contact_Us .text-title {
  60. margin-top: -90px;
  61. }
  62. @media screen and (max-width: 576px) {
  63. .Contact_Us .text-title {
  64. margin-top: -45px;
  65. }
  66. }
  67. .Contact_Us h1 {
  68. font-weight: 600;
  69. font-size: 32px;
  70. text-align: center;
  71. }
  72. .Contact_Us hr {
  73. width: 5vw;
  74. margin: 0 auto;
  75. height: 6px;
  76. opacity: 1 !important;
  77. background: #000;
  78. }
  79. @media screen and (max-width: 576px) {
  80. .Contact_Us hr {
  81. width: 15vw;
  82. }
  83. }
  84. .Contact_Us p {
  85. margin-top: 15px;
  86. text-align: center;
  87. color: #888888;
  88. }
  89. .Contact_Us .contact_us_title {
  90. width: 80vw;
  91. margin: 0 auto;
  92. text-align: center;
  93. }
  94. @media screen and (max-width: 576px) {
  95. .Contact_Us .contact_us_title {
  96. width: 100vw;
  97. }
  98. }
  99. .Contact_Us .service_info {
  100. padding-top: 100px;
  101. background-color: #FFEBE2;
  102. position: relative;
  103. }
  104. .Contact_Us .service_info .circle-orange {
  105. bottom: 10px;
  106. right: 80px;
  107. width: 180px;
  108. }
  109. .Contact_Us .service_info .content-service {
  110. margin-top: 50px;
  111. }
  112. .Contact_Us .service_info .content-service h2 {
  113. font-weight: 600;
  114. color: #EA5413;
  115. font-size: 28px;
  116. }
  117. .Contact_Us .service_info .content-service ul {
  118. margin-top: 15px;
  119. color: #888888;
  120. padding-left: 1rem;
  121. }
  122. .Contact_Us .service_info .learn-more {
  123. margin-top: 50px;
  124. padding: 5px 15px;
  125. border: 1px solid #EA5413;
  126. border-radius: 30px;
  127. background: #EA5413;
  128. color: #fff;
  129. -webkit-transition: 0.3s;
  130. transition: 0.3s;
  131. }
  132. .Contact_Us .service_info .learn-more:hover {
  133. color: #EA5413;
  134. background: #fff;
  135. }
  136. @media screen and (max-width: 576px) {
  137. .Contact_Us .service_info .learn-more {
  138. margin-top: 15px;
  139. }
  140. }
  141. .Contact_Us .service_info .service_slider_Box-m {
  142. width: 80vw;
  143. margin: 0 auto;
  144. }
  145. .Contact_Us .service_info .service_slider_Box-m .slick-dots {
  146. bottom: 270px;
  147. left: 50px;
  148. }
  149. .Contact_Us .service_info .service_slider_Box-m .slick-prev {
  150. position: absolute;
  151. left: -20px;
  152. z-index: 100;
  153. top: 130px;
  154. }
  155. .Contact_Us .service_info .service_slider_Box-m .slick-next {
  156. position: absolute;
  157. right: -10px;
  158. z-index: 100;
  159. top: 130px;
  160. }
  161. .Contact_Us .service_info .service_slider_Box {
  162. width: 85vw;
  163. margin: 0 auto;
  164. height: 400px;
  165. }
  166. .Contact_Us .service_info .service_slider_Box .slick-dots {
  167. bottom: 40px;
  168. width: 20%;
  169. left: 90px !important;
  170. }
  171. .Contact_Us .service_info .service_slider_Box .service_slider {
  172. height: 450px;
  173. position: relative;
  174. }
  175. .Contact_Us .service_info .service_slider_Box .slick-prev {
  176. position: absolute;
  177. left: 5px;
  178. top: 350px;
  179. z-index: 100;
  180. width: 60px;
  181. height: 60px;
  182. }
  183. .Contact_Us .service_info .service_slider_Box .slick-next {
  184. position: absolute;
  185. left: 350px;
  186. top: 350px;
  187. z-index: 100;
  188. width: 60px;
  189. height: 60px;
  190. }
  191. .Contact_Us .service_info .service_slider_Box .service_Img_Box {
  192. position: relative;
  193. margin-top: 50px;
  194. }
  195. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_seo {
  196. width: 280px;
  197. position: absolute;
  198. left: -180px;
  199. bottom: 180px;
  200. -o-object-fit: cover;
  201. object-fit: cover;
  202. }
  203. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_video {
  204. position: absolute;
  205. width: 360px;
  206. left: -250px;
  207. bottom: 50px;
  208. -o-object-fit: cover;
  209. object-fit: cover;
  210. }
  211. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_developmentimg {
  212. position: absolute;
  213. bottom: 100px;
  214. left: -180px;
  215. width: 280px;
  216. -o-object-fit: cover;
  217. object-fit: cover;
  218. }
  219. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_spiderimg {
  220. position: absolute;
  221. bottom: 80px;
  222. left: -180px;
  223. width: 280px;
  224. -o-object-fit: cover;
  225. object-fit: cover;
  226. }
  227. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_bigdataimg {
  228. position: absolute;
  229. bottom: -10px;
  230. width: 400px;
  231. left: -200px;
  232. -o-object-fit: cover;
  233. object-fit: cover;
  234. }
  235. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_googleads {
  236. position: absolute;
  237. bottom: 10px;
  238. left: -150px;
  239. width: 280px;
  240. -o-object-fit: cover;
  241. object-fit: cover;
  242. }
  243. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img6 {
  244. position: relative;
  245. bottom: 50px;
  246. }
  247. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img1 {
  248. position: relative;
  249. left: 15px;
  250. bottom: 120px;
  251. -o-object-fit: cover;
  252. object-fit: cover;
  253. }
  254. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img2 {
  255. position: relative;
  256. bottom: 50px;
  257. -o-object-fit: cover;
  258. object-fit: cover;
  259. }
  260. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img3 {
  261. position: relative;
  262. left: 15px;
  263. bottom: 100px;
  264. -o-object-fit: cover;
  265. object-fit: cover;
  266. }
  267. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img4 {
  268. position: relative;
  269. bottom: 80px;
  270. -o-object-fit: cover;
  271. object-fit: cover;
  272. }
  273. .Contact_Us #contact_box {
  274. overflow: hidden;
  275. background: #fff;
  276. }
  277. .Contact_Us .Contact_Information {
  278. width: 90vw;
  279. margin: 0 auto;
  280. position: relative;
  281. padding-bottom: 130px;
  282. }
  283. @media screen and (max-width: 576px) {
  284. .Contact_Us .Contact_Information {
  285. width: 100vw;
  286. }
  287. }
  288. .Contact_Us .Contact_Information .Contact_Information_title {
  289. text-align: center;
  290. }
  291. .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
  292. width: 640px;
  293. }
  294. @media screen and (max-width: 576px) {
  295. .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
  296. width: 90vw;
  297. }
  298. }
  299. .Contact_Us .Contact_Information .Contact_Information_title .text-title {
  300. margin-top: -100px;
  301. }
  302. @media screen and (max-width: 576px) {
  303. .Contact_Us .Contact_Information .Contact_Information_title .text-title {
  304. margin-top: -60px;
  305. }
  306. }
  307. .Contact_Us .Contact_Information .Contact_Information_title .qrcode {
  308. width: 350px;
  309. }
  310. .Contact_Us .Contact_Information .contact-text {
  311. margin-top: -50px;
  312. }
  313. .Contact_Us .circle {
  314. position: absolute;
  315. bottom: -300px;
  316. left: -350px;
  317. }
  318. @-webkit-keyframes drift {
  319. 0% {
  320. -webkit-transform: rotate(0deg);
  321. transform: rotate(0deg);
  322. }
  323. 100% {
  324. -webkit-transform: rotate(360deg);
  325. transform: rotate(360deg);
  326. }
  327. }
  328. @keyframes drift {
  329. 0% {
  330. -webkit-transform: rotate(0deg);
  331. transform: rotate(0deg);
  332. }
  333. 100% {
  334. -webkit-transform: rotate(360deg);
  335. transform: rotate(360deg);
  336. }
  337. }
  338. /*# sourceMappingURL=styles-contact.css.map */