sg-index.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. .wk_logo img {
  2. height: 45px !important;
  3. }
  4. .sg-page1-warp {
  5. background: url('/template/wfdsoft_jiaohu/images/portal/cssimg/banner_1_sg.jpg') no-repeat center !important;
  6. width: 100%;
  7. height: 100%;
  8. }
  9. .sg-page2-warp {
  10. background: url('/template/wfdsoft_jiaohu/images/portal/cssimg/banner_2_sg.jpg') no-repeat center !important;
  11. width: 100%;
  12. height: 100%;
  13. }
  14. .page3,
  15. .page4,
  16. .page5,
  17. .page6,
  18. .page7 {
  19. background: url('/template/wfdsoft_jiaohu/images/portal/cssimg/banner_3_sg.jpg') no-repeat center !important;
  20. }
  21. .sg-page2-left {
  22. color: white;
  23. font-size: 3em;
  24. position: absolute;
  25. top: 30%;
  26. left: 13%;
  27. }
  28. .sg-page2-desp {
  29. font-size: 0.8em;
  30. font-weight: lighter;
  31. }
  32. .sg-page2-right {
  33. color: white;
  34. position: absolute;
  35. top: 30%;
  36. right: 15%;
  37. font-size: 1.5em;
  38. }
  39. .sg-page2-button {
  40. display: inline-block;
  41. padding: 5px 10px;
  42. margin-left: 20px;
  43. }
  44. .sg-bg-purple {
  45. background-color: #556aa9;
  46. }
  47. .sg-bg-green {
  48. background-color: #14a30b;
  49. }
  50. .sg-bg-blue {
  51. background-color: #077be8;
  52. }
  53. .sg-page2-label-group {
  54. display: block;
  55. margin: 40px 0;
  56. }
  57. .sg-page2-label {
  58. background: url('/template/wfdsoft_jiaohu/images/portal/cssimg/six-shape-bg.png');
  59. -webkit-background-size: 150px 150px;
  60. background-size: 150px 150px;
  61. width: 150px;
  62. height: 150px;
  63. display: flex;
  64. justify-content: center;
  65. align-items: center;
  66. }
  67. .sg-page2-label-item {
  68. display: inline-block;
  69. font-size: 1.8em;
  70. margin-left: 8px;
  71. }
  72. .sg-page2-activity-item {
  73. margin: 20px 0;
  74. }
  75. .sg-page2-button-group {
  76. margin-left: 50px;
  77. }
  78. .sg-page3-warp,
  79. .sg-page4-warp,
  80. .sg-page5-warp,
  81. .sg-page6-warp,
  82. .sg-page7-warp,
  83. .sg-page8-warp {
  84. margin: 10%;
  85. }
  86. .page7 {
  87. background-color: white;
  88. }
  89. .sg-page3-left, .sg-page3-right,
  90. .sg-page4-left, .sg-page4-right,
  91. .sg-page5-left, .sg-page5-right,
  92. .sg-page6-left, .sg-page6-right {
  93. display: inline-block;
  94. }
  95. .sg-page3-left,
  96. .sg-page4-left,
  97. .sg-page5-left,
  98. .sg-page6-left {
  99. color: white;
  100. font-size: 3em;
  101. margin-left: 30px;
  102. }
  103. .sg-page3-desp,
  104. .sg-page4-desp,
  105. .sg-page5-desp,
  106. .sg-page6-desp {
  107. font-size: 0.8em;
  108. font-weight: lighter;
  109. }
  110. .sg-page3-right,
  111. .sg-page4-right,
  112. .sg-page5-right,
  113. .sg-page6-right {
  114. color: white;
  115. float: right;
  116. font-size: 1.5em;
  117. margin-top: 50px;
  118. margin-right: 30px;
  119. }
  120. .sg-road-item,
  121. .sg-travel-item {
  122. width: 20%;
  123. overflow: hidden;
  124. display: inline-block;
  125. margin: 30px;
  126. color: white;
  127. font-size: 1.5em;
  128. position: relative;
  129. }
  130. .sg-news-item {
  131. width: 25%;
  132. overflow: hidden;
  133. display: inline-block;
  134. margin: 10px 30px;
  135. color: white;
  136. font-size: 1.5em;
  137. position: relative;
  138. }
  139. .sg-club-item {
  140. margin: 30px;
  141. color: white;
  142. font-size: 3em;
  143. }
  144. .sg-news-content {
  145. position: absolute;
  146. top: 20px;
  147. left: 20px;
  148. padding: 0 8px;
  149. font-size: 1.3em;
  150. }
  151. .sg-road-group,
  152. .sg-travel-group,
  153. .sg-news-group {
  154. display: flex;
  155. justify-content: space-between;
  156. align-items: center;
  157. }
  158. .sg-club-group {
  159. display: flex;
  160. justify-content: center;
  161. align-items: center;
  162. }
  163. .sg-road-image,
  164. .sg-travel-image,
  165. .sg-news-image {
  166. width: 100%;
  167. }
  168. .sg-road-title {
  169. text-align: center;
  170. margin: 20px;
  171. }
  172. .sg-road-content,
  173. .sg-travel-content {
  174. font-size: 0.9em;
  175. font-weight: lighter;
  176. }
  177. .sg-travel-content {
  178. text-align: center;
  179. }
  180. .page7 {
  181. color: white;
  182. }
  183. .sg-page7-top {
  184. display: flex;
  185. justify-content: center;
  186. align-items: flex-end;
  187. }
  188. .sg-page7-top-content, .sg-page7-top-title {
  189. display: inline-block;
  190. font-size: 3em;
  191. font-weight: bold;
  192. }
  193. .sg-page7-top-title span {
  194. color: green;
  195. }
  196. .sg-page7-top-image {
  197. width: 150px;
  198. }
  199. .sg-page7-divider {
  200. width: 100%;
  201. height: 5px;
  202. background-color: green;
  203. }
  204. .sg-page7-bottom {
  205. display: flex;
  206. justify-content: center;
  207. margin: 0 100px;
  208. background-color: rgba(0, 0, 0, 0.5);
  209. }
  210. .sg-page7-group {
  211. margin: 20px;
  212. font-size: 1.2em;
  213. }
  214. .sg-page7-list-title {
  215. font-size: 1.8em;
  216. font-weight: bold;
  217. }
  218. .sg-page7-list {
  219. margin-top: 20px;
  220. font-weight: lighter;
  221. }
  222. .page8 {
  223. background-color: black;
  224. color: white;
  225. }
  226. .sg-page8-left, .sg-page8-right {
  227. display: inline-block;
  228. }
  229. .sg-page8-warp {
  230. display: flex;
  231. align-items: center;
  232. margin-top: 15%;
  233. }
  234. .sg-page8-left {
  235. width: 250px;
  236. height: 350px;
  237. border: 3px solid green;
  238. position: relative;
  239. }
  240. .sg-page8-image {
  241. position: absolute;
  242. top: 20px;
  243. right: -20px;
  244. }
  245. .sg-page8-left-title {
  246. position: absolute;
  247. top: 50px;
  248. right: -70px;
  249. font-size: 3em;
  250. font-style: italic;
  251. border-bottom: 3px solid white;
  252. }
  253. .sg-page8-left-desp {
  254. position: absolute;
  255. top: 110px;
  256. right: -70px;
  257. font-size: 1.1em;
  258. font-style: italic;
  259. border-bottom: 1px solid white;
  260. }
  261. .sg-page8-label {
  262. position: absolute;
  263. top: 160px;
  264. right: -50px;
  265. font-size: 2em;
  266. font-style: italic;
  267. width: 70px;
  268. height: 70px;
  269. line-height: 70px;
  270. text-align: center;
  271. background-color: red;
  272. }
  273. .sg-page8-right {
  274. margin-left: 150px;
  275. }
  276. .sg-page8-right-logo {
  277. display: flex;
  278. align-items: flex-end;
  279. }
  280. .sg-page8-right-image {
  281. width: 150px;
  282. height: 150px;
  283. display: inline-block;
  284. }
  285. .sg-page8-right-desp {
  286. font-size: 3em;
  287. font-weight: bolder;
  288. display: inline-block;
  289. }
  290. .sg-page8-right-content {
  291. font-size: 4em;
  292. font-weight: bolder;
  293. }
  294. .sg-page8-warp {
  295. display: flex;
  296. justify-content: center;
  297. }