portal-common/src/main/webapp/common/css/style-ict-bootstrap.css

   1 /**\r
   2  * Copyright 2016-2017, CMCC Technologies Co., Ltd.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *         http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16 @font-face {\r
  17   font-family: 'Lato';\r
  18   font-style: normal;\r
  19   font-weight: 400;\r
  20   src: local('Lato Regular'), local('Lato-Regular'), url(9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');\r
  21 }\r
  22 html, body, div, span, applet, object, blockquote, pre,\r
  23 a, abbr, acronym, address, big, cite, code,\r
  24 del, dfn, em, img, ins, kbd, q, s, samp,\r
  25 small, strike, strong, sub, sup, tt, var,\r
  26 b, u, i, center,\r
  27 dl, dt, dd, ol, ul, li,\r
  28 fieldset, form, label, legend,\r
  29 table, caption, tbody, tfoot, thead, tr, th, td,\r
  30 article, aside, canvas, details, embed, \r
  31 figure, figcaption, footer, header, hgroup, \r
  32 menu, nav, output, ruby, section, summary,\r
  33 time, mark, audio, video {\r
  34         margin: 0;\r
  35         padding: 0;\r
  36         border: 0;\r
  37         font-size: 1em;\r
  38         vertical-align: baseline;\r
  39 }\r
  40 /* HTML5 display-role reset for older browsers */\r
  41 article, aside, details, figcaption, figure, \r
  42 footer, header, hgroup, menu, nav, section {\r
  43         display: block;\r
  44 }\r
  45 body {\r
  46         background: rgba(231, 231, 231, 0.43);\r
  47         line-height: 1.125em;\r
  48         color: white;\r
  49         max-width: 1920px;\r
  50         margin: 0 auto;\r
  51         position: relative;\r
  52         font-family: 'Lato', Helvetica, Arial, Tahoma;\r
  53         text-shadow: 1px 1px 0 rgba(0,0,0,0.3);\r
  54 }\r
  55 ol, ul {\r
  56         padding: 0 10px;\r
  57         margin: 0 10px;\r
  58         line-height: 1.5em;\r
  59 }\r
  60 h1, h2, h3, h4, h5, h6 {\r
  61         text-shadow: 1px 1px 0 rgba(0,0,0,0.5);\r
  62         font-family: 'Lato', Georgia, Helvetica, Tahoma;\r
  63         margin: 10px 0;\r
  64         font-weight: normal;\r
  65 }\r
  66 h1 {\r
  67         font-size: 1.875em;\r
  68 }\r
  69 h2 {\r
  70         font-size: 1.6em;\r
  71         line-height: 1em;\r
  72 }\r
  73 h3 {\r
  74         font-size: 1.25em;\r
  75 }\r
  76 h4 {\r
  77         font-size: 1.125em;\r
  78 }\r
  79 h5 {\r
  80         font-size: 1em;\r
  81 }\r
  82 h6 {\r
  83         font-size: 0.875em;\r
  84 }\r
  85 a {\r
  86         text-decoration: none;\r
  87         color: white;\r
  88 }\r
  89 a:hover {\r
  90         color: white;\r
  91         opacity: 0.9;\r
  92 }\r
  93 a:visited {\r
  94         color: white;\r
  95 }\r
  96 h2 {\r
  97         cursor: pointer;\r
  98 }\r
  99 code, pre {\r
 100         font-family: Monaco, Menlo, Consolas;\r
 101         font-size: 1em;\r
 102         color: #FFFFDE;\r
 103         padding: 0 3px 2px;\r
 104 }\r
 105 \r
 106 table {\r
 107         border-collapse: collapse;\r
 108         border-spacing: 0;\r
 109 }\r
 110 \r
 111 .header {\r
 112         /*padding: 14px 0;\r
 113         background-color: rgb(19, 17, 17);\r
 114         background-color: #006a3f;\r
 115         background-image:       \r
 116                                         radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), \r
 117                                         radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), \r
 118                                         radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), \r
 119                                         radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);\r
 120         background-image:       \r
 121                                         -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), \r
 122                                         -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), \r
 123                                         -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), \r
 124                                         -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);\r
 125     background-position: 0 0px, 4px 4px, 0 1px, 4px 5px;\r
 126     background-size: 8px 8px;\r
 127         border-bottom: 1px solid rgb(41, 41, 41);*/\r
 128         margin-top: 1%;\r
 129         /* margin-left: 10%; */\r
 130         margin-left: 90px;\r
 131 }\r
 132 @media (min-width: 1600px){\r
 133         .header {\r
 134                 margin-top: 1%;\r
 135                 margin-left: 95px;\r
 136         }\r
 137 }\r
 138 \r
 139 .header div.float-left {\r
 140         /*padding-left: 2%;*/\r
 141 }\r
 142 \r
 143 @media (min-width: 769px) and (max-width: 1024px) { \r
 144         .header div.float-left {\r
 145                 /*padding-left: 5%;*/\r
 146         }\r
 147 }\r
 148 \r
 149 .header a {\r
 150         font-size: 35px;\r
 151         color: white;\r
 152         display: block;\r
 153         opacity: 0.8;\r
 154 }\r
 155 .header a:first-letter {\r
 156         font-size: 60px;\r
 157         line-height: 40px;\r
 158         font-weight: bold;\r
 159 }\r
 160 .header .target {\r
 161         margin-left: 5px;\r
 162         margin-bottom: 20px;\r
 163 }\r
 164 \r
 165 .header .reponsive-block {\r
 166         list-style: none;\r
 167         margin: 0px;\r
 168         padding: 50px 2% 0 0;\r
 169 }\r
 170 \r
 171 .header .reponsive-block li {\r
 172         display: inline-block;\r
 173         float:left;\r
 174 }\r
 175 \r
 176 .header .reponsive-block a {\r
 177         display: inline-block;\r
 178         margin: 0 5px;\r
 179         cursor: pointer;\r
 180         background: url(../i/reponsive.png) no-repeat;\r
 181 }       \r
 182 \r
 183 .header .reponsive-block a.desktop {\r
 184         background-position: 3px 0;\r
 185         width: 34px; height: 26px;\r
 186 }       \r
 187 \r
 188 .header .reponsive-block a.tablet-landscape {\r
 189         background-position: -49px 0;\r
 190         width: 22px;\r
 191         height: 22px;\r
 192 }       \r
 193 \r
 194 .header .reponsive-block a.tablet-portrait {\r
 195         background-position: -90px 0;\r
 196         width: 18px;\r
 197         height: 24px;\r
 198 }       \r
 199 \r
 200 .header .reponsive-block a.iphone-landscape {\r
 201         background-position: -129px 0;\r
 202         width: 20px;\r
 203         height: 20px;\r
 204 }       \r
 205 \r
 206 .header .reponsive-block a.iphone-portrait {\r
 207         background-position: -166px 0;\r
 208         width: 16px;\r
 209         height: 26px;\r
 210 }       \r
 211 \r
 212 .header .reponsive-block a.desktop:hover,\r
 213 .header .reponsive-block a.desktop.active {\r
 214         background-position: 3px -34px;\r
 215 }       \r
 216 \r
 217 .header .reponsive-block a.tablet-landscape:hover,\r
 218 .header .reponsive-block a.tablet-landscape.active {\r
 219         background-position: -49px -34px;\r
 220 }       \r
 221 \r
 222 .header .reponsive-block a.tablet-portrait:hover,\r
 223 .header .reponsive-block a.tablet-portrait.active {\r
 224         background-position: -91px -33px;\r
 225 }       \r
 226 \r
 227 .header .reponsive-block a.iphone-landscape:hover,\r
 228 .header .reponsive-block a.iphone-landscape.active {\r
 229         background-position: -128px -33px;\r
 230 }       \r
 231 \r
 232 .header .reponsive-block a.iphone-portrait:hover,\r
 233 .header .reponsive-block a.iphone-portrait.active {\r
 234         background-position: -166px -33px;\r
 235 }       \r
 236 .free-wall {\r
 237         margin: auto;\r
 238 }\r
 239 \r
 240 .free-wall-logo {\r
 241         margin: auto;\r
 242         height: 420px;\r
 243 }\r
 244 .size2-2 {\r
 245         width: 80px;\r
 246         height: 80px;\r
 247 }\r
 248 \r
 249 .size11 {\r
 250         height: 160px;\r
 251         width: 160px;\r
 252 }\r
 253 \r
 254 .size12 {\r
 255         width: 160px;\r
 256         height: 320px;\r
 257 }\r
 258 \r
 259 .size21 {\r
 260         width: 320px;\r
 261         height: 160px;\r
 262 }\r
 263 \r
 264 .size22 {\r
 265         height: 320px;\r
 266         width: 320px;\r
 267 }\r
 268 \r
 269 .size13 {\r
 270         width: 160px;\r
 271         height: 480px;\r
 272 }\r
 273 \r
 274 .size31 {\r
 275         width: 480px;\r
 276         height: 160px;\r
 277 }\r
 278 \r
 279 .size23 {\r
 280         width: 320px;\r
 281         height: 480px;\r
 282 }\r
 283 \r
 284 .size24 {\r
 285         width: 320px;\r
 286         height: 640px;\r
 287 }\r
 288 \r
 289 .size32 {\r
 290         width: 480px;\r
 291         height: 320px;\r
 292 }\r
 293 \r
 294 .size33 {\r
 295         width: 480px;\r
 296         height: 480px;\r
 297 }\r
 298 \r
 299 .size34 {\r
 300         width: 480px;\r
 301         height: 640px;\r
 302 }\r
 303 \r
 304 .size43 {\r
 305         width: 640px;\r
 306         height: 480px;\r
 307 }\r
 308 \r
 309 .size35 {\r
 310         width: 480px;\r
 311         height: 800px;\r
 312 }\r
 313 \r
 314 .size53 {\r
 315         width: 800px;\r
 316         height: 480px;\r
 317 }\r
 318 \r
 319 .size36 {\r
 320         width: 480px;\r
 321         height: 960px;\r
 322 }\r
 323 \r
 324 .size41 {\r
 325         width: 270px;\r
 326         height: 160px;\r
 327 }\r
 328 .size42 {\r
 329         width: 270px;\r
 330         height: 320px;\r
 331 }\r
 332 .size41-1024 {\r
 333         width: 213px;\r
 334         height: 133px;\r
 335 }\r
 336 .size42-1024 {\r
 337         width: 213px;\r
 338         height: 275px;\r
 339 }\r
 340 .size41-1366 {\r
 341         width: 278px;\r
 342         height: 156px;\r
 343 }\r
 344 .size42-1366 {\r
 345         width: 278px;\r
 346         height: 332px;\r
 347 }\r
 348 .size41-1440 {\r
 349         width: 310px;\r
 350         height: 168px;\r
 351 }\r
 352 .size42-1440 {\r
 353         width: 310px;\r
 354         height: 340px;\r
 355 }\r
 356 .size41-1600 {\r
 357         width: 330px;\r
 358         height: 173px;\r
 359 }\r
 360 .size42-1600 {\r
 361         width: 330px;\r
 362         height: 354px;\r
 363 }\r
 364 \r
 365 .donate form {\r
 366         height: 100%;\r
 367         width: 100%;\r
 368         background: rgb(44, 62, 80);\r
 369 }\r
 370 \r
 371 .donate form .paypal {\r
 372         display: block;\r
 373         margin: auto;\r
 374         padding: 20px 0px 0px 0px;\r
 375         outline: 0;\r
 376 }\r
 377 \r
 378 .img-demo {\r
 379         vertical-align: bottom;\r
 380         list-style: none;\r
 381         margin:0;\r
 382         padding: 0;\r
 383 }\r
 384 \r
 385 .img-demo li {\r
 386         float: left;\r
 387         width: 25%;\r
 388         text-align: center;\r
 389 }       \r
 390 \r
 391 .img-demo li img {\r
 392         border: 2px solid white;\r
 393         width: 98px;\r
 394         height: 98px;\r
 395 }\r
 396 \r
 397 .float-left {\r
 398         float: left;\r
 399 }\r
 400 \r
 401 .float-right {\r
 402         float: right;\r
 403 }\r
 404 \r
 405 .clearfix:before,\r
 406 .clearfix:after {\r
 407     content: "";\r
 408     display: table;\r
 409 }\r
 410 \r
 411 .clearfix:after {\r
 412     clear: both;\r
 413 }\r
 414 \r
 415 .clearfix {\r
 416     zoom: 1; /* For IE 6/7 (trigger hasLayout) */\r
 417 }\r
 418 \r
 419 .rest-left {\r
 420         margin-left: 244px;\r
 421 }\r
 422 \r
 423 .desc h1,\r
 424 .desc h2,\r
 425 .desc h3,\r
 426 .desc h4,\r
 427 .desc h5,\r
 428 .desc h6 {\r
 429         font-weight: bold;\r
 430 }\r
 431 \r
 432 .desc h2 {\r
 433         border-bottom: 1px solid rgba(0,0,0,0.1);\r
 434         margin-top: 0px;\r
 435         margin-bottom: 0px;\r
 436         padding-bottom: 50px;\r
 437 }\r
 438 \r
 439 .desc h2 span {\r
 440         float: left;\r
 441         display: block;\r
 442         line-height: 50px;\r
 443 }\r
 444 \r
 445 @media (max-width: 1024px) {  \r
 446         .brick {                \r
 447                 height:140px;\r
 448         }\r
 449 }\r
 450 \r
 451 .brick {\r
 452         margin-top:10px;\r
 453         background-color: white;\r
 454         /* float: left; */\r
 455         cursor: default;\r
 456         overflow: hidden;\r
 457         background-repeat: no-repeat;\r
 458         background-size: cover;\r
 459         background-position: center;\r
 460         height:160px;\r
 461 }\r
 462 \r
 463 @media (min-width: 1440px) {  \r
 464         .brick {                \r
 465                 height:180px;\r
 466         }\r
 467 }\r
 468 \r
 469 .brick .cover {\r
 470         overflow: hidden;\r
 471         margin: 20px;\r
 472         margin-top: 25%;\r
 473         font-size: 30px;\r
 474         float: right;\r
 475         text-align: right;\r
 476 }\r
 477 \r
 478 .brick .read-more {\r
 479         position: absolute;\r
 480         display: none;\r
 481         bottom: 0px;\r
 482         left: 0px;\r
 483         right: 0px;\r
 484         padding: 12px;\r
 485         background: rgb(0, 0, 0);\r
 486         background: rgba(0, 0, 0, 0.45);\r
 487 }\r
 488 \r
 489 .brick:hover .read-more {\r
 490         display: block;\r
 491         cursor: pointer;\r
 492 }\r
 493 \r
 494 .brick .desc {\r
 495         display: none;\r
 496 }\r
 497 \r
 498 .full-width .float-left {\r
 499         display: none;\r
 500 }\r
 501 \r
 502 .full-width .desc {\r
 503         display: block;\r
 504 }\r
 505 \r
 506 .full-width.brick {\r
 507         box-shadow: none;\r
 508         overflow: visible;\r
 509         border: none !important;\r
 510         background: none !important;\r
 511 }\r
 512 \r
 513 .full-width.brick .cover { \r
 514         margin: 0px 20px;\r
 515         color: #333;\r
 516 }\r
 517 \r
 518 .full-width.brick .cover * {\r
 519         text-shadow: none;\r
 520 }\r
 521 \r
 522 .full-width.brick .cover code {\r
 523         color: #666;\r
 524 }\r
 525 \r
 526 .open .float-left {\r
 527         display: none;\r
 528 }\r
 529 \r
 530 .open .desc {\r
 531         display: block;\r
 532 }\r
 533 \r
 534 .example {\r
 535         width: 0px;\r
 536         height: 0px;\r
 537         overflow: visible !important; /* for ie7 */\r
 538 }\r
 539 \r
 540 .example-draggable {\r
 541         cursor: move;\r
 542 }\r
 543 \r
 544 .example-draggable * {\r
 545         cursor: move;\r
 546 }\r
 547 \r
 548 .example-draggable a {\r
 549         cursor: pointer;\r
 550 }\r
 551 \r
 552 .cell {\r
 553         background-position: center center;\r
 554         background-repeat: no-repeat;\r
 555         background-size: cover;\r
 556         position: absolute;\r
 557         background-color: #222;\r
 558 }\r
 559 \r
 560 [class*="-share"] {\r
 561         cursor: pointer;\r
 562         margin: 20px 0;\r
 563         line-height: 30px;\r
 564         padding-left: 30px;\r
 565 }\r
 566 \r
 567 .facebook-share {\r
 568         background: url(../i/fb.png) no-repeat left center;\r
 569 }\r
 570 \r
 571 .twitter-share {\r
 572         background: url(../i/tw.png) no-repeat left center;\r
 573 }\r
 574 \r
 575 .google-share {\r
 576         background: url(../i/gp.png) no-repeat left center;\r
 577 }\r
 578 \r
 579 .download-icon {\r
 580         background: url(../i/download.png) no-repeat left center;\r
 581         display: block;\r
 582         margin: 0 0 10px 0;\r
 583         line-height: 30px;\r
 584         padding-left: 30px;\r
 585 }\r
 586 \r
 587 .js-icon {\r
 588         background: url(../i/js.png) no-repeat left center;\r
 589         display: block;\r
 590         line-height: 30px;\r
 591         padding-left: 30px;\r
 592 }\r
 593 \r
 594 .fork {\r
 595         float: right;\r
 596         width: 100%;\r
 597         height: 100%;\r
 598         display: block;\r
 599         background: url(../i/forkme.png) no-repeat top right;\r
 600 }\r
 601 \r
 602 .back-button {\r
 603         position: fixed;\r
 604         z-index: 9999;\r
 605         padding: 1%;\r
 606         bottom: 2%;\r
 607         right: 2%;\r
 608         display: none;\r
 609         background: black;\r
 610 }\r
 611 \r
 612 .back-button .back-icon {\r
 613         background: url(../i/back.png) no-repeat top center;\r
 614         width: 45px;\r
 615         height: 27px;\r
 616         display: block;\r
 617 }\r
 618 \r
 619 .back-button .back-icon:hover {\r
 620         background: url(../i/back.png) no-repeat bottom center;\r
 621 }\r
 622 \r
 623 @media (min-width: 1600px) {  \r
 624         .main-content-wrapper{\r
 625                 width:100%;\r
 626                 margin-left:95px;\r
 627                 margin-right: 1%;       \r
 628         }\r
 629 }\r
 630 \r
 631 @media (min-width: 1441px) and (max-width: 1599px) {  \r
 632         .main-content-wrapper{\r
 633                 width:100%;\r
 634                 /*margin-left: 0%;      */\r
 635                 margin-left:75px;\r
 636                 margin-right: 1%;       \r
 637         }\r
 638 }\r
 639 \r
 640 @media (min-width: 1367px) and (max-width: 1440px) {  \r
 641         .main-content-wrapper{\r
 642                 width:100%;\r
 643                 margin-left: 75px;      \r
 644                 margin-right: 1%;       \r
 645         }\r
 646 }\r
 647 \r
 648 @media (min-width: 1281px) and (max-width: 1366px) {  \r
 649         .main-content-wrapper{\r
 650                 width:100%;\r
 651                 /*margin-left: 2%;      */\r
 652                 margin-left:75px;\r
 653                 margin-right: 2%;       \r
 654         }\r
 655 }\r
 656 \r
 657 @media (min-width: 1025px) and (max-width: 1280px) { \r
 658         .main-content-wrapper{\r
 659                 width:100%;\r
 660                 /*margin-left: 4%;*/\r
 661                 margin-left:75px;       \r
 662                 margin-right: 1%;       \r
 663         }\r
 664 }\r
 665 \r
 666 @media (min-width: 769px) and (max-width: 1024px) { \r
 667         .main-content-wrapper{\r
 668                 width:100%;\r
 669                 /*margin-left: 6%;*/\r
 670                 margin-left:75px;       \r
 671                 margin-right: 1%;       \r
 672         }\r
 673 }\r
 674 \r
 675 @media (min-width: 641px) and (max-width: 768px) { \r
 676         .main-content-wrapper{\r
 677                 width:100%;\r
 678                 margin-left: 10%;       \r
 679                 margin-right: 1%;       \r
 680         }\r
 681 }\r
 682 \r
 683 @media (min-width: 481px) and (max-width: 640px) { \r
 684         .main-content-wrapper{\r
 685                 width:100%;\r
 686                 margin-left: 0%;        \r
 687                 margin-right: 1%;       \r
 688         }\r
 689 }\r
 690 \r
 691 @media (max-width: 480px) { \r
 692         .main-content-wrapper{\r
 693                 width:100%;\r
 694                 margin-left: 9%;        \r
 695                 margin-right: 1%;       \r
 696         }\r
 697 }\r
 698 \r
 699 body{\r
 700         font-family: microsoft yahei;\r
 701         background: #484747;\r
 702 }\r
 703 \r
 704 .skyBlue-mainpage{\r
 705         background: -moz-linear-gradient(left top, #1cadd9, #20c0f0);\r
 706         background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #1cadd9), color-stop(1, #20c0f0));\r
 707         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cadd9', endColorstr='#20c0f0', GradientType='0');\r
 708         background: linear-gradient(to bottom right,#1cadd9, #20c0f0);\r
 709 }\r
 710 .golden-mainpage{\r
 711         background-image: -moz-linear-gradient(left top, #bca374, #d9cf7a);\r
 712         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bca374), color-stop(1, #d9cf7a));\r
 713         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bca374, endColorstr=#d9cf7a, GradientType=0);\r
 714         background: linear-gradient(to bottom right,#bca374, #d9cf7a);\r
 715 }\r
 716 .manLieONCloud-image{\r
 717         background-image: url('../image/mainpage/pic/1.png');\r
 718 }\r
 719 .orange-mainpage{\r
 720         background-image: -moz-linear-gradient(left top, #f09c0a, #f4be35);\r
 721         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f09c0a), color-stop(1, #f4be35));\r
 722         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f09c0a, endColorstr=#f4be35, GradientType=0);\r
 723         background: linear-gradient(to bottom right,#f09c0a, #f4be35);\r
 724 }\r
 725 .pinkishRed-mainpage{\r
 726         background-image: -moz-linear-gradient(left top, #e03655, #ef3a5b);\r
 727         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e03655), color-stop(1, #ef3a5b));\r
 728         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e03655, endColorstr=#ef3a5b, GradientType=0);\r
 729         background: linear-gradient(to bottom right,#e03655, #ef3a5b);\r
 730 }\r
 731 .magicCube-image{\r
 732         background-image: url('../image/mainpage/pic/4.png');\r
 733 }\r
 734 .magicThought-image{\r
 735         background-image: url('../image/mainpage/pic/5.png');\r
 736 }\r
 737 .grassGreen-mainpage{\r
 738         background-image: -moz-linear-gradient(left top, #008b04, #03a501);\r
 739         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #008b04), color-stop(1, #03a501));\r
 740         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008b04, endColorstr=#03a501, GradientType=0);\r
 741         background: linear-gradient(to bottom right,#008b04, #03a501);\r
 742 }\r
 743 .meeting-image{\r
 744         background-image: url('../image/mainpage/pic/3.png');   \r
 745 }\r
 746 .earth-image{\r
 747         background-image: url('../image/mainpage/pic/2.png');\r
 748 }\r
 749 .toolsImageBrokenLine{\r
 750         background-image: url('../image/mainpage/icon/1.png');\r
 751         height: 150px;\r
 752         width: 120px;\r
 753         margin-top: 15%;\r
 754         margin-left:-5px;\r
 755 }\r
 756 .toolsImageHierachy{\r
 757         background-image: url('../image/mainpage/icon/2.png');\r
 758         height: 150px;\r
 759         width: 120px;\r
 760         margin-top: 15%;\r
 761         margin-left:-5px;\r
 762 }\r
 763 .toolsImageGear{\r
 764         background-image: url('../image/mainpage/icon/3.png');\r
 765         height: 150px;\r
 766         width: 120px;\r
 767         margin-top: 15%;\r
 768         margin-left:-5px;\r
 769 }\r
 770 .toolsImagePresent{\r
 771         background-image: url('../image/mainpage/icon/4.png');\r
 772         height: 150px;\r
 773         width: 120px;\r
 774         margin-top: 15%;\r
 775         margin-left:-5px;\r
 776 }\r
 777 .toolsImageFile{\r
 778         background-image: url('../image/mainpage/icon/5.png');\r
 779         height: 150px;\r
 780         width: 120px;\r
 781         margin-top: 15%;\r
 782         margin-left:-5px;\r
 783 }\r
 784 .toolsImageBriefcase{\r
 785         background-image: url('../image/mainpage/icon/6.png');\r
 786         height: 150px;\r
 787         width: 120px;\r
 788         margin-top: 15%;\r
 789         margin-left:-5px;\r
 790 }\r
 791 .contentTip{\r
 792         opacity:0;\r
 793         display:block;\r
 794         padding: 20px;\r
 795         text-align: left;\r
 796         line-height: inherit;\r
 797         text-indent: 2em;\r
 798         position: absolute;\r
 799 }\r
 800 .contentTipShow{\r
 801         display:block;\r
 802         padding: 20px;\r
 803         text-align: left;\r
 804         line-height: inherit;\r
 805         text-indent: 2em;\r
 806         position: absolute;\r
 807 }\r
 808 .coverHidden{\r
 809         display:none;\r
 810 }\r
 811 .coverShrink{\r
 812         width:0px !important;\r
 813         height:0px !important;\r
 814 }\r
 815 /*\r
 816 .brick  .contentToggle{\r
 817   -webkit-transition: opacity 1s ease-in-out;\r
 818   -moz-transition: opacity 1s ease-in-out;\r
 819   -o-transition: opacity 1s ease-in-out;\r
 820   transition: opacity 1s ease-in-out;\r
 821 }\r
 822 .brick  .cover :hover{\r
 823         opacity:0;\r
 824 }\r
 825 */\r
 826 .hideSideMenuForMainPage {\r
 827   display: none! important;\r
 828 }\r
 829 .fullFillDiv {\r
 830    width:100%;\r
 831    height:100%;\r
 832 }\r
 833 @media screen and (min-width: 992px)and (max-width: 1280px) {\r
 834     .brick .cover {\r
 835             font-size:25px;\r
 836         }\r
 837 }\r
 838 \r