style.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  1. /* Reset CSS */
  2. html,
  3. body,
  4. div,
  5. span,
  6. applet,
  7. object,
  8. iframe,
  9. h1,
  10. h2,
  11. h3,
  12. h4,
  13. h5,
  14. h6,
  15. p,
  16. blockquote,
  17. pre,
  18. a,
  19. abbr,
  20. acronym,
  21. address,
  22. big,
  23. cite,
  24. code,
  25. del,
  26. dfn,
  27. em,
  28. img,
  29. ins,
  30. kbd,
  31. q,
  32. s,
  33. samp,
  34. small,
  35. strike,
  36. strong,
  37. sub,
  38. sup,
  39. tt,
  40. var,
  41. b,
  42. u,
  43. i,
  44. center,
  45. dl,
  46. dt,
  47. dd,
  48. ol,
  49. ul,
  50. li,
  51. fieldset,
  52. form,
  53. label,
  54. legend,
  55. table,
  56. caption,
  57. tbody,
  58. tfoot,
  59. thead,
  60. tr,
  61. th,
  62. td,
  63. article,
  64. aside,
  65. canvas,
  66. details,
  67. embed,
  68. figure,
  69. figcaption,
  70. footer,
  71. header,
  72. hgroup,
  73. menu,
  74. nav,
  75. output,
  76. ruby,
  77. section,
  78. summary,
  79. time,
  80. mark,
  81. audio,
  82. video {
  83. margin: 0;
  84. padding: 0;
  85. border: 0;
  86. font-size: 100%;
  87. font: inherit;
  88. vertical-align: baseline;
  89. }
  90. /* HTML5 display-role reset for older browsers */
  91. article,
  92. aside,
  93. details,
  94. figcaption,
  95. figure,
  96. footer,
  97. header,
  98. hgroup,
  99. menu,
  100. nav,
  101. section {
  102. display: block;
  103. }
  104. body {
  105. line-height: 1;
  106. }
  107. ol,
  108. ul {
  109. list-style: none;
  110. }
  111. blockquote,
  112. q {
  113. quotes: none;
  114. }
  115. blockquote:before,
  116. blockquote:after,
  117. q:before,
  118. q:after {
  119. content: "";
  120. content: none;
  121. }
  122. table {
  123. border-collapse: collapse;
  124. border-spacing: 0;
  125. }
  126. /* Global Style */
  127. :root {
  128. --main-color: #000;
  129. --sub-color: #e47140;
  130. }
  131. img {
  132. max-width: 100%;
  133. height: auto;
  134. }
  135. h1 {
  136. background-image: url("/img/logo.svg");
  137. width: 100%;
  138. height: 60px;
  139. text-indent: 101%;
  140. white-space: nowrap;
  141. overflow: hidden;
  142. background-size: 270px;
  143. background-position: center;
  144. background-repeat: no-repeat;
  145. }
  146. video {
  147. width: 100%;
  148. height: auto;
  149. position: relative;
  150. z-index: 100;
  151. }
  152. body {
  153. font-family: "Source Sans 3", sans-serif;
  154. letter-spacing: 1px;
  155. }
  156. .banner-text {
  157. position: relative;
  158. }
  159. @media (max-width: 767px) {
  160. .banner-text {
  161. display: flex;
  162. align-items: center;
  163. justify-content: center;
  164. }
  165. }
  166. .banner-text section {
  167. position: absolute;
  168. z-index: 100;
  169. top: 6vw;
  170. left: 5vw;
  171. color: #fff;
  172. text-align: center;
  173. }
  174. @media (max-width: 1200px) {
  175. .banner-text section {
  176. left: 3vw;
  177. }
  178. }
  179. @media (max-width: 767px) {
  180. .banner-text section {
  181. padding: 0 5px;
  182. top: unset;
  183. left: unset;
  184. }
  185. }
  186. .banner-text section h2 {
  187. font-size: 50px;
  188. font-weight: 500;
  189. line-height: 66px;
  190. margin-bottom: 40px;
  191. }
  192. @media (max-width: 1200px) {
  193. .banner-text section h2 {
  194. font-size: 40px;
  195. line-height: 60px;
  196. margin-bottom: 20px;
  197. }
  198. }
  199. @media (max-width: 991px) {
  200. .banner-text section h2 {
  201. font-size: 38px;
  202. line-height: 44px;
  203. margin-bottom: 10px;
  204. }
  205. }
  206. @media (max-width: 767px) {
  207. .banner-text section h2 {
  208. margin-bottom: 30px;
  209. }
  210. .banner-text section h2 span {
  211. font-size: 26px;
  212. }
  213. }
  214. @media (max-width: 575px) {
  215. .banner-text section h2 {
  216. font-size: 30px;
  217. line-height: 30px;
  218. }
  219. .banner-text section h2 span {
  220. font-size: 20px;
  221. }
  222. }
  223. .banner-text section p {
  224. font-size: 24px;
  225. font-weight: 400;
  226. line-height: 34px;
  227. max-width: 870px;
  228. }
  229. @media (max-width: 1200px) {
  230. .banner-text section p {
  231. font-size: 20px;
  232. max-width: 740px;
  233. }
  234. }
  235. @media (max-width: 991px) {
  236. .banner-text section p {
  237. font-size: 18px;
  238. max-width: 670px;
  239. line-height: 28px;
  240. }
  241. }
  242. @media (max-width: 767px) {
  243. .banner-text section p {
  244. max-width: 100%;
  245. }
  246. }
  247. @media (max-width: 575px) {
  248. .banner-text section p {
  249. font-size: 16px;
  250. line-height: 20px;
  251. }
  252. }
  253. .content {
  254. padding: 150px 0 200px;
  255. margin-top: -3px;
  256. position: relative;
  257. background-image: linear-gradient(to bottom, #040203 0%, #101d32 100%);
  258. overflow: hidden;
  259. }
  260. @media (max-width: 767px) {
  261. .content {
  262. padding: 100px 0 150px;
  263. }
  264. }
  265. .content .top-bg,
  266. .content .bottom-bg {
  267. width: 100vw;
  268. position: absolute;
  269. }
  270. .content .top-bg {
  271. top: -25vw;
  272. }
  273. .content .bottom-bg {
  274. bottom: 0;
  275. }
  276. .content .title {
  277. display: flex;
  278. justify-content: center;
  279. margin: 90px auto;
  280. }
  281. .content .title h2 {
  282. color: #fff;
  283. text-align: center;
  284. font-size: 46px;
  285. }
  286. @media (max-width: 575px) {
  287. .content .title h2 {
  288. font-size: 36px;
  289. }
  290. }
  291. .content .title h2::before {
  292. content: "";
  293. display: block;
  294. width: 285px;
  295. height: 1px;
  296. position: relative;
  297. top: -10px;
  298. left: -25px;
  299. background-color: #fff;
  300. }
  301. .content .title h2::after {
  302. content: "";
  303. display: block;
  304. width: 285px;
  305. height: 1px;
  306. position: relative;
  307. top: 10px;
  308. right: -25px;
  309. background-color: #fff;
  310. }
  311. .content .title img {
  312. width: 350px;
  313. }
  314. @media (max-width: 767px) {
  315. .content .title img {
  316. width: 250px;
  317. }
  318. }
  319. .content .img-block,
  320. .content .video-block {
  321. position: relative;
  322. z-index: 10;
  323. }
  324. .content .img-block {
  325. max-height: 300px;
  326. transition: max-height 1s ease;
  327. overflow: hidden;
  328. }
  329. .content .img-block img {
  330. width: 100%;
  331. height: 185px;
  332. -o-object-fit: cover;
  333. object-fit: cover;
  334. }
  335. @media (max-width: 767px) {
  336. .content .img-block img {
  337. height: 120px;
  338. }
  339. }
  340. .content .video-block h3 {
  341. margin-bottom: 10px;
  342. text-align: center;
  343. color: #fff;
  344. font-size: 26px;
  345. }
  346. .content .video-block section {
  347. overflow: hidden;
  348. }
  349. .content .video-block section .cover-img {
  350. transition: all 0.5s;
  351. }
  352. .content .video-block section .cover-img:hover {
  353. transform: scale(1.1);
  354. }
  355. .content .video-block section span {
  356. display: block;
  357. position: relative;
  358. }
  359. .content .video-block section span:hover .cover-img {
  360. transform: scale(1.1);
  361. }
  362. .content .video-block .play-icon {
  363. position: absolute;
  364. width: 25%;
  365. left: 50%;
  366. top: 50%;
  367. transform: translate(-50%, -50%);
  368. z-index: 100;
  369. }
  370. .content .coming-block img {
  371. width: 100%;
  372. -o-object-fit: cover;
  373. object-fit: cover;
  374. -o-object-position: top;
  375. object-position: top;
  376. }
  377. .content .dropdown {
  378. width: 40px;
  379. position: relative;
  380. top: 0;
  381. transition: all 0.3s;
  382. cursor: pointer;
  383. filter: invert(100%) sepia(92%) saturate(1%) hue-rotate(247deg) brightness(108%) contrast(99%);
  384. }
  385. .content .dropdown:hover {
  386. top: 5px;
  387. }
  388. .content .dropdown-rotate {
  389. transform: rotate(180deg);
  390. }
  391. .content .show {
  392. max-height: 2800px !important;
  393. }
  394. .media-btn {
  395. display: flex;
  396. flex-direction: column;
  397. position: fixed;
  398. right: 15px;
  399. bottom: 10px;
  400. }
  401. .media-btn img {
  402. width: 45px;
  403. transition: all 0.3s;
  404. }
  405. .media-btn img:hover {
  406. opacity: 0.8;
  407. }
  408. footer {
  409. position: relative;
  410. display: flex;
  411. justify-content: center;
  412. }
  413. footer h3 {
  414. position: absolute;
  415. bottom: 10px;
  416. z-index: 10;
  417. color: #fff;
  418. font-size: 14px;
  419. }/*# sourceMappingURL=style.css.map */